Unable to test click : error method ''simulate'' is meant to run on 1 node

Question

I was able to test some onClick events on this file, but when it comes to the code below I cannot test. The main reason I believe is because there's a class inside of render which I am not able to test it

I tried to test by className, id etc.. but still getting the same error.

Using jest and enzyme - React JS

here is the onClick event I am trying to test:

         <div className='report-wrapper'>

        <div className='fields-item-wrapper span-two-col'>
          <label className='workflow-label' for=''> Contacts </label>
          <Select
            className={'field-input-select margin-right'}              
            id=''
            value={this.state.Contact}
            onChange={(e) => {let val = e ? e.value : null; this.setState({Contact: e, Account: null, accountOptions: []}); this.getAccounts(e)}}
            onClick={() => {this.setState({showRequired: false})} }
            options={this.state.contactOptions}
            isDisabled={loading}
          />
        </div>

Using jest and enzyme - I already mount the component

describe(' Edit Data Test', () => {
 let wrapper;

  beforeEach(() => wrapper = mount(<BrowserRouter><Component {...baseProps} /></BrowserRouter>));

it("should check button click event - Select class", () => {
baseProps.onClick.mockClear();
wrapper.setState({
  showRequired: false,
});
wrapper.update() 
wrapper.find('#test').simulate("click");

  });

what is '#test'? Sounds like it is not finding your element.... — epascarello
is used to be id=' ' , I added test just to try to find the id but it was not finding the element — usertestREACT
I usually test by class name or id but unable to find it. This select is inside of a render() — usertestREACT

zsgomori zsgomori · Accepted Answer · 2019-02-27T21:44:09

It turned out that you use withRouter on the component that is being tested. Basically, accessing a component that is wrapped in a HOC is a bit more complex than you're trying to do.

First of all, I'd suggest reading my article on Medium so that have a basic understanding of the emerging issue. Let me emphasize the following sentence that I grabbed from there:

The actual problem is that you can’t access the component within a HOC directly, instead you have to get the appropriate component from a level deeper.

Secondly, you should change the mounting of the component similarly to this:

// Imports ...

describe('something', () => {
   let wrapper;

   beforeEach(() => {
      // This can be used to do full DOM rendering: mount(shallow(<MyComponent />).get(0));
      wrapper = shallow(shallow(<MyComponent />).get(0)); 
      // Notice that I don't use <BrowserRouter />. Obviously, pass the necessary props to the component.
   });

   it('tests something', () => {
      // I don't know exactly what `baseProps` is in your code, probably you don't need that here.
      // What you need to do is find the corresponding component and simulate a click event.
      wrapper.find(Select).simulate('click');

      // And here, write the expected action which probably should be the same as it is in your case:
      expect(wrapper.state('showRequired')).toBeFalsy();
   });
});

Please, next time provide more exact information about the codes, the structure and the actual problem. Moreover, the indentation in the examples - you added above - is pretty bad, makes it hard to understand what actually happens there.

Unable to test click : error method ''simulate'' is meant to run on 1 node

1 Answers