Question

您能否告诉我如何使用componentDidMount测试enzyme函数。我从componentDidMount中的服务器获取数据，这些数据运行正常。现在我想测试这个函数。< / p>

这是我的代码 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包），请在与__mocks__相同的目录中创建名为node_modules的文件夹，如：

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

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

在那里，你将创建你的模拟版本。

如果你只需要模仿.get()，它可以像下面这样简单：

export default { get: jest.fn() }

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

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();

将其重置为默认的模拟实施。

jest.mock不是反应函数吗？

1 个答案: