reactjs - 为什么第一个 Jest 测试会导致第二个测试失败?
问题描述
我有一个呈现组件列表的 React 组件。我正在运行一些测试来模拟从 JSONPlaceHolder 加载用户的 axios 模块。一切正常,包括异步测试,它按预期模拟数据。但是,如果您查看下面的代码,只要第一个测试被注释掉,它就会通过?我错过了什么吗?多年来一直在敲我的头。测试之间是否需要进行一些清理?提前致谢。
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
解决方案
您只模拟第一次axios.get
调用,因为您使用的是mockImplementationOnce。
当您shallow(<UsersList />)
两次时,第二次是超时加载用户。
您可以在内部添加一个带有mockResolvedValueOnce的beforeEach方法,以在每个测试之前模拟:axios.get
beforeEach(() => {
axios.get.mockResolvedValueOnce({data: mockUsers});
}
推荐阅读
- html - 使标签的整个宽度可点击和响应
- performance - 如何通过 jenkins - jmeter webdriver 脚本管理 Web 驱动程序?
- python - 根据 SPARQL 查询和 Pagerank 值突出显示 draw_networkx 可视化中的节点
- anylogic - 是否有任何内置函数可以在anylogic中获取某个直径范围内的节点(点节点)列表?
- javascript - HTML5 Canvas 笔画文本重叠加入阿拉伯语、印地语、孟加拉语等语言的部分
- reactjs - 如何在 React 中处理表格中的滚动条事件
- javascript - 如何同时使用 Fullpage.js 和 Scrollr.js
- java - java中一种用例的正则表达式,从DANNO开始,以整数结尾
- java - 如何处理改造的响应(这里我的响应没有显示数据,它只显示调用的代码和状态)
- .net - 通过客户端访问时,Rest API 获取 CORS