我有一个呈现组件列表的 React 组件。我正在运行一些模拟 axios 模块的测试,该模块从 JSONPlaceHolder 加载用户。一切正常,包括异步测试,它按预期模拟数据。但是,如果您查看下面的代码,它只会在第一个测试被注释掉时才通过?我错过了什么吗?多年来一直在敲我的头。在测试之间是否需要进行一些清理?提前致谢。
import { waitForElement } from 'enzyme-async-helpers';
import UsersList from '../UsersList';
import axios from 'axios';
const mockUsers = [
{
"id": 1,
"name": "Leanne Mock",
"username": "Bret",
"email": "Sincere@april.biz"
},
{
"id": 2,
"name": "John Mock",
"username": "Jospeh",
"email": "wacky@april.biz"
}
]
axios.get.mockImplementationOnce(() => Promise.resolve({
data: mockUsers
}))
describe('<UsersList /> tests:', () => {
//WHEN I UNCOMMENT THIS TEST THE SECOND TEST FAILS?
test('It renders without crashing', (done) => {
// const wrapper = shallow(<UsersList />);
});
test('It renders out <User /> components after axios fetches users', async () => {
const wrapper = shallow(<UsersList />);
expect(wrapper.find('#loading').length).toBe(1); //loading div should be present
await waitForElement(wrapper, 'User'); //When we have a User component found we know data has loaded
expect(wrapper.find('#loading').length).toBe(0); //loading div should no longer be rendered
expect(axios.get).toHaveBeenCalledTimes(1);
expect(wrapper.state('users')).toEqual(mockUsers); //check the state is now equal to the mockUsers
expect(wrapper.find('User').get(0).props.name).toBe(mockUsers[0].name); //check correct data is being sent down to User components
expect(wrapper.find('User').get(1).props.name).toBe(mockUsers[1].name);
})
})
我得到的错误信息是:
The render tree at the time of timeout:
<div
id="loading"
>
Loading users
</div>
console.warn node_modules/enzyme-async-helpers/lib/wait.js:42
As JSON:
{ node:
{ nodeType: 'host',
type: 'div',
props: { id: 'loading', children: ' Loading users ' },
key: undefined,
ref: null,
instance: null,
rendered: ' Loading users ' },
type: 'div',
props: { id: 'loading' },
children: [ ' Loading users ' ],
'$$typeof': Symbol(react.test.json) }
Test Suites: 1 failed, 1 total
Tests: 2 failed, 2 total
最佳答案
你只 mock 第一个 axios.get
打电话是因为您正在使用 mockImplementationOnce .
当您shallow(<UsersList />)
两次,第二次是加载用户超时。
您可以添加 beforeEach带有 mockResolvedValueOnce 的方法在里面, mock axios.get
在每次测试之前:
beforeEach(() => {
axios.get.mockResolvedValueOnce({data: mockUsers});
}
关于reactjs - 为什么第一个 Jest 测试会导致第二个测试失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56506036/