Cannot set value of select element inside component with Enzyme

Question

I've been trying to set the value for a select element inside the Dropdown component, but the test keeps failing.

Here is a codesandbox of the component to test.

it('should execute onChange once and change value to "item2"', () => {
        const onChangeMock = jest.fn();
        const wrapper = mount(
            
        );

    
        wrapper.find('select').simulate('change', { value: 'item2' });

        console.log(wrapper.debug());
        console.log(wrapper.find('select').props());
        
        expect(wrapper.find('select').props().value).toBe('item2');
        expect(onChangeMock.mock.calls.length).toBe(1);
    });

Output after running npm run test:

 expect(received).toBe(expected) // Object.is equality
 Expected: "item2"
 Received: undefined

 51 |         console.log(wrapper.find('select').props());
 52 |         
 53 |         expect(wrapper.find('select').props().value).toBe('item2');
    |                                                      ^
 54 |         expect(onChangeMock.mock.calls.length).toBe(1);
 55 |     });
 56 | });

console.log
    
      
        
           (Optional)

user_2361131 · Answer

You are simulating onChange which means when unit test will try to call onchange, mocked function will execute (dropdown value wont be changed - that's real code not mocked code)

Which means the expect(ation) of expecting the component's value to change when you call "change" event (via simulate) is incorrect

So, onChange={ onChangeMock } causes mocked (jest.fn()) to be executed (rather than component's "real code")

What is correct expect(ation) is that when you simulate the "change" event for your component (via code wrapper.find('select').simulate('change', { value: 'item2' }); ), then the onChange event should be triggered, which is correctly validated via the code expect(onChangeMock.mock.calls.length).toBe(1);

On a slightly tangential note, don't test the "change" event - a user wont use code (change event) to select dropdown value so you should not test that. And you do not have to test the native functionality either. You can use snapshot testing if you like to ensure that when you change value of the

Cannot set value of select element inside component with Enzyme

1 Answers