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

在类和函数组件中，我导入了一个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');

})

//AuthService.js
导出默认类AuthService{
构造函数（）{
this.fetch=this.fetch.bind（this）；
}
fetch（）{
返回获取（url）。然后（（res）=>{
返回res.json（）；
})
}
}
//Tester.js
将AuthService从“/path/导入/auth”；
从“react”导入{useState，useEffect}；
导出默认测试仪=（）=>{
const Auth=new AuthService（）；
const[thing，setThing]=useState（“”）
useffect（（）=>{
Auth.fetch（'url'）。然后（（数据）=>{
设置（数据）
})
})
返回(
{thing}
）；
}
//Tester.spec.js
将AuthService从“/path/导入/auth”；
将测试仪从“/path/to/Tester”导入；
它（“”，（）=>{
常量分量=浅（）；
const mockFetch=jest.fn（（）=>Promise.resolve（'newResult'））
jest.mock（'path/to/auth'，（）=>（）=>({
获取：mockFetch
}));
expect（component.find（'p'）.text（））.toEqual（''）；
component.update（）；
expect（component.find（'p'）.text（））.toEqual（'newResult'）；
})

首先，我认为

Auth.fetch

效果应该运行一次：

依赖项的空集合[]表示该效果仅在组件装载时运行一次，而不是每次重新渲染时运行一次

因此，您需要传递一个空的

[]

作为

useffect

的第二个参数

这是使用

useffect

和

enzyme

AuthService.js

：

导出默认类AuthService{
构造函数（）{
this.fetch=this.fetch.bind（this）；
}
获取（url）{
返回fetch（url）。然后（res=>{
返回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>;
};

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%覆盖率的单元测试结果：

通过src/stackoverflow/58741410/Tester.spec.jsx
✓  （64毫秒）
console.count src/stackoverflow/58741410/Tester.jsx:858
使用效果：1
------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
------------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
Tester.jsx | 100 | 100 | 100 | 100 ||
------------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：4.834s，估计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",

源代码：