Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 01:26
    ljharb commented #2445
  • Sep 23 23:23

    ljharb on master

    [*] [dev deps] update `eslint` [enzyme-adapter-react-16] v1.15… (compare)

  • Sep 23 22:54

    ljharb on enzyme-adapter-react-16@1.15.5

    [*] [dev deps] update `eslint` [enzyme-adapter-react-16] v1.15… (compare)

  • Sep 23 22:36
    ljharb closed #2417
  • Sep 23 22:36
    ljharb commented #2417
  • Sep 23 18:44
    aashayamballi edited #2453
  • Sep 23 18:43
    ljharb commented #1222
  • Sep 23 18:41
    aashayamballi opened #2453
  • Sep 23 18:40
    ljharb commented #2429
  • Sep 23 18:00
    trigunam commented #2429
  • Sep 23 17:53
    aashayamballi commented #2282
  • Sep 23 17:52
    tareqdayya commented #2412
  • Sep 23 17:42
    trigunam commented #1222
  • Sep 23 17:35
    ljharb commented #2412
  • Sep 23 17:34
    ljharb commented #1222
  • Sep 23 17:06
    trigunam commented #1222
  • Sep 23 06:57
    tareqdayya commented #2412
  • Sep 23 04:49
    dschinkel commented #2448
  • Sep 23 04:49
    dschinkel commented #2448
  • Sep 23 04:47
    ljharb commented #2448
@ljharb ArrowDown its just svg
Jordan Harband
right but if you console.log(ArrowDown) what prints out?
also what do you mean it's just svg
double check everything you're using as a custom element
the problem is really here
<div data-test="selectClosedDropDown" className={css(styles.value(error, template).base)}>
        {value ? value : <span className={css(styles.regular.placeholder)}>{placeholder}</span>}
my test crashing coz it can't handle SVG. how to solve it?)
Jordan Harband
don't rely on webpack for stuff like that. use
basically anything you do in webpack that's not "run babel" or "minify" is tech debt
thank u bro <3
Hi, anybody here?
How can I add a mock config file to my tests? For example config.SECURITY:
const userElements = config.SECURITY !== 0 && (
        <div className="configUser">
          <span className="configUser__user">
            {window.innerWidth > config.BREAKPOINTS.MD &&
                ? 'Userinfo'
                : + ' ' + userData.surname)}
          <Icon type="down" />
Marius Jakobsen

I can't get the onBlur event to be triggered:

      .findWhere(input => input.props().accessibilityLabel === 'mobilnummer')

The test fails with the following error on the last line: TypeError: Cannot read property 'length' of undefined. Any ideas? It's working fine with an onChangeText event I trigger just before this, on the same element.

Andrew Luca

Hello! Can someone tell me, does enzyme support global wrappingComponent
Something like this.

import Enzyme  from 'enzyme';
import React, { StrictMode } from 'react'
import Adapter from 'enzyme-adapter-react-16';

  adapter: new Adapter(),
  wrappingComponent: ({ children }) => <StrictMode>{children}</StrictMode>

When I use this I get a stack overflow error

    RangeError: Maximum call stack size exceeded

      at createElement (node_modules/react/cjs/react.development.js:753:23)
      at createElement (node_modules/react/cjs/react.development.js:1733:31)
      at wrapWithWrappingComponent (node_modules/enzyme-adapter-utils/src/Utils.js:347:5)
      at ReactSixteenAdapter.wrapWithWrappingComponent (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:903:13)
      at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:353:53)
      at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
      at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)
      at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:355:29)
      at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
      at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)

So, does enzyme support this?

Andrew Luca
I think I will create my own wrapper
function mount(cmp, options = {}, {
  return enzymeMount(cmp, { ...options, wrappingComponent: StrictMode },
I want to test Context Consumer and Provider, please can anyone help me with a proper example, quite confused with the implementation, also when i do wrapper.context('value') , i get undefined . let editItem = mount(<EditItem {...props}/>,{context: {value : 'test'}); Also can consumer be used in class components ?
Santosh Kumar

Hi, I am trying to get the <options> from the <select> , code is => <option key={item} value={item}> {item} </option>)
I am using the shallow render and test case code for option is
it('should have the correct number of option tags', function(){ expect(comp.find('option').length).toBeGreaterThan(0); })

test case is passed but it is not passing through option tags in => <option key={item} value={item}> {item} </option>)

please, can some one help me with this

code coverage is failing
Jordan Harband
@neelasantosh not sure what you mean
can you share the full test code, and also the full component code?
Jordan Harband
@iamandrewluca it should work, yes - that rangeerror is something i'd love you to file as an issue
Andrew Luca
Thanks @ljharb
I added wrappingComponent using Enzyme.configure in react-transition-group library wihtout problems
When tried to add it in reactstrap library I got the issue mentioned above.
Jordan Harband
i'm not familiar with that library, but an issue would be great
Tomek Kasperek

Hey everyone. I know that this topic has been covered many times, but nothing has worked for me. I am trying to create function that will shallow render my component with its store (Redux store). I am using this snippet:

export function shallowWithStore(component, store) {
    function ProviderWrapper({ children }) {
        return (
            <Provider store={store}>

    return shallow(component, {
        wrappingComponent: ProviderWrapper,

Later in the test I will use:

const component = shallowWithStore(<ReplyEditContainer />, createMockStore(store));

And it seems it doesn't work. I always get the same error, even if I don't use wrappingComponent option at all.

Error: Could not find "store" in the context of "Connect(ReplyEditContainer)". Either wrap the root component in a <Provider>, or pass ...

Is there anything missing in my code, because the API seems to fit perfectly for my usecase

Tomek Kasperek
I am using react-redux@^7.0.0 btw. I just saw that there is some issue hooks
Jordan Harband
react doesn't provide hooks for hooks
so you can't use shallow, with a react-redux version that uses hooks, at least not out of the box
Tomek Kasperek
Okay. Cool. So for now there is no resolution for this right, other than downgrading to earlier versions
Does anyone have a clue about this issue, enzymejs/enzyme#2415
Hardik Kaji
Hello 👋 , I am facing issue with mount with MobX observer component.
it's throwing below error.
 ✖ should render properly
      HeadlessChrome 83.0.4103 (Mac OS X 10.15.6)
    Error: Enzyme Internal Error: unknown node with tag 15

describe("<SomeComponent />", function () {
    it("should render properly", function () {
        const component = mount(
                <SomeComponent />
The error comes when i wrap my component with observer(SomeComponent)
Hello, I am facing issue with the shallow
const props = {
intl: { formatMessage: jest.fn() },
resetFormAction: jest.fn(),
history: jest.fn()
let instance = null;

beforeEach(() => {
    instance = shallow(<NotificationView {...props}/>);

it('should render the notification component', () => {

it('should find the elements of the notification component', () => {

    const notification = instance.find(Notification);
    const notificationActionBar = instance.find(NotificationActionBar);

TypeError: Enzyme::Selector expects a string, object, or Component Constructor
Jordan Harband
the implication is that either Notification or NotificationActionBar is not actually a component constructor.
try console.logging them and confirm

Hi, I am new to enzyme.
I am trying to test my functional component, but shallow returns me always null. Any idea where I should look at?

const wrapper = shallow(<MyComponent />);

I do have set adapter in setupTest.js (app created with create-react-app)

import '@testing-library/jest-dom/extend-expect';
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() });

I have tried to shallow on direct html element and this works fine.

const wrapper = shallow(<div >test</div>);

For check I use

2 replies
Abhishek Singh
Hi I am stuck with something, can anyone help me out?
I am calling a member function of a class component using enzyme in a unit test, and that function calls thethis.setState
but the state of my component is not updating
Abhishek Singh
class MyComp extends React.Component {
    state = { value: '' }
    handleChange = (e) => {
        this.setState({ value: }, () => {
            // do sommething else

    render() {
        return (
            <input onChange={ this.handleChange } />

const wrapper = shallow(<MyComp />);

wrapper.find('input').simulate('change', {
    target: {
        value: 1,
        name: 0

expect(wrapper.state().value).toEqual('1'); // this gives error as it is receiving state.value as ''
6 replies
Can anyone please help me understand why the component's internal setState is not working?
Jordan Harband
oh, well yeah
this.setState shouldn't be given an object, it should be given a callback
altho hm
that should work. but since you do handleChange =, instead of a proper bound prototype method, that means you also can't mock it out
(don't put functions in class fields)
Hi everyone, I'm new to web development and I've started using enzyme a few days ago.
I am using mount to load a component into the DOM. One of its children is a Blueprint3.Select component whose value I want to change.
Unlike with shallow, I cannot use simulate on the react component to change its value which is wrapped in a <div>.
I have two questions:
  • Is there a way I can manipulate the DOM directly to set the value of the <div> of this component?
  • Can we use simulate on React component when using mount?
Jordan Harband
i wouldn't suggest using simulate ever
if you want to invoke a prop function, use .invoke
@ljharb Thanks :)