如何模拟组件中用于测试的AuthService服务类

Question

在类和函数组件中，我都导入了一个AuthService，它有一个fetch方法(我使用它而不是global.fetch(。

在我的测试文件中，我试图模拟这个AuthService，这样我就可以测试TestComponent，但TestComponent使用的是默认的实现。它正在实例化一个实际的AuthService实例。我怎么能嘲笑这堂服务课？例如：

//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');
})

Answer 1

首先，我认为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