[英]React Testing Library - Mock Service Worker response not used by component
[英]How to mock AuthService service class used in component for testing?
在 class 和功能组件中,我有一个我导入的 AuthService,它有一个 fetch 方法(我使用它而不是 global.fetch)。
在我的测试文件中,我试图模拟这个 AuthService,以便我可以测试 TestComponent,但 TestComponent 使用的是默认实现。 它正在实例化一个实际的 AuthService 实例。 如何模拟此服务 class? 例如:
//AuthService.js
export default class AuthService {
constructor() {
this.fetch = this.fetch.bind(this);
}
fetch() {
return fetch(url).then((res) => {
return res.json();
})
}
}
//Tester.js
import AuthService from '/path/to/auth';
import { useState, useEffect } from 'react';
export default Tester = () => {
const Auth = new AuthService();
const [thing, setThing] = useState('')
useEffect(() => {
Auth.fetch('url').then((data) => {
setThing(data)
})
})
return (
<p>{thing}</p>);
}
//Tester.spec.js
import AuthService from '/path/to/auth';
import Tester from '/path/to/tester';
it('<Test>', () => {
const component = shallow(<Tester />);
const mockFetch = jest.fn(() => Promise.resolve('newResult'))
jest.mock('path/to/auth', () => () => ({
fetch: mockFetch
}));
expect(component.find('p').text()).toEqual('');
component.update();
expect(component.find('p').text()).toEqual('newResult');
})
首先,我认为Auth.fetch
效果应该运行一次。 文档说:
空的依赖集 [] 意味着效果只会在组件挂载时运行一次,而不是在每次重新渲染时运行。
因此,您需要传递一个空的[]
作为useEffect
的第二个参数。
这是使用useEffect
和enzyme
时的单元测试解决方案
AuthService.js
:
export default class AuthService {
constructor() {
this.fetch = this.fetch.bind(this);
}
fetch(url) {
return fetch(url).then(res => {
return res.json();
});
}
}
Tester.jsx
:
import AuthService from './AuthService';
import React, { useState, useEffect } from 'react';
export default () => {
const Auth = new AuthService();
const [thing, setThing] = useState('');
useEffect(() => {
console.count('useEffect');
Auth.fetch('url').then(data => {
setThing(data);
});
}, []);
return <p>{thing}</p>;
};
Tester.spec.jsx
:
import React from 'react';
import { mount } from 'enzyme';
import AuthService from './AuthService';
import Tester from './Tester';
import { act } from 'react-dom/test-utils';
jest.mock('./AuthService', () => {
const mAuthService = {
fetch: jest.fn()
};
return jest.fn(() => mAuthService);
});
it('<Test>', async () => {
const authService = new AuthService();
authService.fetch.mockResolvedValue('newResult');
const component = mount(<Tester />);
expect(component.find('p').text()).toEqual('');
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(component.find('p').text()).toEqual('newResult');
});
覆盖率 100% 的单元测试结果:
PASS src/stackoverflow/58741410/Tester.spec.jsx
✓ <Test> (64ms)
console.count src/stackoverflow/58741410/Tester.jsx:858
useEffect: 1
------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
Tester.jsx | 100 | 100 | 100 | 100 | |
------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.834s, estimated 14s
依赖版本:
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
源码: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58741410
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.