点击ReactJs后state没有更新

Question

I test my React application using Enzyme and Jest. This is my component:

 function App() { const [state, setState] = React.useState('default'); const [loading, setLoading] = React.useState(false); const [name, setName] = React.useState('ji'); return ( <div className="App"> <h2>{state}</h2> <h1 className='test'>Helljo</h1> <h1 className='test'>Hello</h1> <button onClick={() => { setState('changed'); setLoading(true) }}>Click</button> <Child setName={setName} name={name}/> </div> ); } export default App;

Clicking on the button I update the text in h2 tag.
Below is my test which should test this event:

 import { configure, shallow, mount, render } from 'enzyme'; import App from './App'; import React, {useState} from "react"; describe('Test main component', () => { let wrapper = shallow(<App />); let setState; let setName; let setLoading; beforeEach(() => { setState = jest.fn(x => {}); setName = jest.fn(x => {}); setLoading = jest.fn(x => {}); React.useState = jest.fn().mockImplementationOnce(state => [state, setState]).mockImplementationOnce(loading => [loading, setLoading]).mockImplementationOnce(name => [name, setName]) }); afterEach(() => { jest.clearAllMocks(); }); test('should change state on text', () => { const btn = wrapper.find("button"); btn.simulate("click"); expect(wrapper.find('h2').text()).toBe('changed'); }) })

Running this test I get:

Expected: "changed"
Received: "default"

Why do I get this and how to make the test workable? Note: if I remove the beforeEach statement the code works as I expect, but I need to keep that logic, because I need to test the state from my component.

Question: Why does my code not retrieve the expected result and how to solve it?

Answer 1

Because you mock setState to a function not do anything so state will not update.

setState = jest.fn(x => {});

You can't mock setState . Because it related to change state and re-render component logic of component . So you should keep the setState , focus on another logic.