enzyme

Enzyme simulate an onChange event

You can simply spy to the method directly via the prototype. it(“responds to name change”, done => { const handleChangeSpy = sinon.spy(New.prototype, “handleChange”); const event = {target: {name: “pollName”, value: “spam”}}; const wrap = mount( <New /> ); wrap.ref(‘pollName’).simulate(‘change’, event); expect(handleChangeSpy.calledOnce).to.equal(true); }) Alternatively, you can use spy on the instance’s method, but you have to … Read more

How to mock React component methods with jest and enzyme

The method can be mocked in this way: it(‘handleNameInput’, () => { let wrapper = shallow(<MyComponent/>); wrapper.instance().searchDish = jest.fn(); wrapper.update(); wrapper.instance().handleNameInput(‘BoB’); expect(wrapper.instance().searchDish).toBeCalledWith(‘BoB’); }) You also need to call .update on the wrapper of the tested component in order to register the mock function properly. The syntax error was coming from the wrong assingment (you need … Read more

Jest spyOn function called

You were almost done without any changes besides how you spyOn. When you use the spy, you have two options: spyOn the App.prototype, or component component.instance(). const spy = jest.spyOn(Class.prototype, “method”) The order of attaching the spy on the class prototype and rendering (shallow rendering) your instance is important. const spy = jest.spyOn(App.prototype, “myClickFn”); const … Read more

how to change jest mock function return value in each test?

You can mock the module so it returns spies and import it into your test: import {navigationEnabled, guidanceEnabled} from ‘../../../magic/index’ jest.mock(‘../../../magic/index’, () => ({ navigationEnabled: jest.fn(), guidanceEnabled: jest.fn() })); Then later on you can change the actual implementation using mockImplementation navigationEnabled.mockImplementation(()=> true) //or navigationEnabled.mockReturnValueOnce(true); and in the next test navigationEnabled.mockImplementation(()=> false) //or navigationEnabled.mockReturnValueOnce(false);

How to set initial state for useState Hook in jest and enzyme?

You can mock React.useState to return a different initial state in your tests: // Cache original functionality const realUseState = React.useState // Stub the initial state const stubInitialState = [‘stub data’] // Mock useState before rendering your component jest .spyOn(React, ‘useState’) .mockImplementationOnce(() => realUseState(stubInitialState)) Reference: https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

Simulate a button click in Jest

#1 Using Jest This is how I use the Jest mock callback function to test the click event: import React from ‘react’; import { shallow } from ‘enzyme’; import Button from ‘./Button’; describe(‘Test Button component’, () => { it(‘Test click event’, () => { const mockCallBack = jest.fn(); const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>)); button.find(‘button’).simulate(‘click’); expect(mockCallBack.mock.calls.length).toEqual(1); … Read more

How can I use Jest to spy on a method call?

The key is using jests spyOn method on the object’s prototype. It should be like this: const spy = jest.spyOn(Component.prototype, ‘methodName’); const wrapper = mount(<Component {…props} />); wrapper.instance().methodName(); expect(spy).toHaveBeenCalled(); As found here e.g.: Test if function is called react and enzyme Please note it is also best practice to clear the spied function after each … Read more