[英]How to mock AuthService service class used in component for testing?
In both class and functional components, I have an AuthService that I import that has a fetch method (that I use instead of the global.fetch).在 class 和功能组件中,我有一个我导入的 AuthService,它有一个 fetch 方法(我使用它而不是 global.fetch)。
In my test files, I am trying to mock this AuthService so that I can test the TestComponent, but TestComponent is using the default implementation.在我的测试文件中,我试图模拟这个 AuthService,以便我可以测试 TestComponent,但 TestComponent 使用的是默认实现。 It is instantiating an actual AuthService instance.它正在实例化一个实际的 AuthService 实例。 How can I mock this service class?如何模拟此服务 class? For example:例如:
//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');
})
Firstly, I think the Auth.fetch
effect should be run once.首先,我认为Auth.fetch
效果应该运行一次。 The docs says : 文档说:
The empty set of dependencies, [], means that the effect will only run once when the component mounts, and not on every re-render.空的依赖集 [] 意味着效果只会在组件挂载时运行一次,而不是在每次重新渲染时运行。
So, you need pass an empty []
as second parameter for useEffect
.因此,您需要传递一个空的[]
作为useEffect
的第二个参数。
Here is the unit test solution when using useEffect
and enzyme
这是使用useEffect
和enzyme
时的单元测试解决方案
AuthService.js
: 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
: 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
: 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');
});
Unit test result with 100% coverage:覆盖率 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
Dependencies versions:依赖版本:
"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",
Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58741410源码: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58741410
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.