jest.mock 不是反应中的函数吗？

Question

您能否告诉我如何使用enzyme 测试componentDidMount 函数。我正在从componentDidMount 中的服务器获取数据，它工作得很好。现在我想测试这个函数。

这是我的代码 https://codesandbox.io/s/oq7kwzrnj5

  componentDidMount(){
        axios
          .get('https://*******/getlist')
          .then(res => {
            this.setState({
              items : res.data.data
            })
          })
          .catch(err => console.log(err))
      }

我试试这样

 it("check ajax call", () => {
      const componentDidMountSpy = jest.spyOn(List.prototype, 'componentDidMount');

      const wrapper = shallow(<List />);
    });

查看更新的代码

https://codesandbox.io/s/oq7kwzrnj5

it("check ajax call", () => {
      jest.mock('axios', () => {
        const exampleArticles:any = {
          data :{
            data:['A','B','c']
          }
        }
        return {
          get: jest.fn(() => Promise.resolve(exampleArticles)),
        };
      });


    expect(axios.get).toHaveBeenCalled();
    });

错误

Answer 1

你看起来快到了。只需添加expect()：

expect(componentDidMountSpy).toHaveBeenCalled();

如果需要检查是否被多次调用，可以使用toHaveBeenCalledTimes(count)。

另外，请务必在最后 mockRestore() 模拟，以使其在其他测试中不被模拟。

List.prototype.componentDidMount.restore();

---

要模拟axios（或任何node_modules 包），请在与node_modules 相同的目录中创建一个名为__mocks__ 的文件夹，例如：

 --- project root
  |-- node_modules
  |-- __mocks__

在其中，创建一个名为 <package_name>.js 的文件（即 axios.js）。

在其中，您将创建您的模拟版本。

如果你只需要模拟.get()，可以这么简单：

export default { get: jest.fn() }

然后在您的代码中，靠近顶部（imports 之后）添加：

import axios from 'axios';

jest.mock('axios');

在您的测试中，添加对axios.get.mockImplementation() 的调用以指定它将返回的内容：

axios.get.mockImplementation(() => Promise.resolve({ data: { data: [1, 2, 3] } });

这将使axios.get() 返回你给它的任何东西（在这种情况下，Promise 解析为该对象）。

然后你可以做任何你需要做的测试。

最后，测试结束：

axios.get.mockReset();

将其重置为默认的 mocked 实现。