使用 jest 对 axios post 进行单元测试

Question

我正在使用 jest 编写单元测试。我该如何测试axios.post？我研究了所有内容，但几乎每个人都有使用axios.get但不与帖子一起使用的示例。

 handleLogout(event) {
    event.preventDefault();
    axios
      .post("/logout")
      .then(function(response) {
        window.location = "/login";
      })
      .catch(function(error) {
        console.log(error);
      });

该方法由按钮事件触发onclick。

<button
    type="button"
    value="Logout"
    onClick={this.handleLogout}
  >
    Logout
  </button>

我如何开玩笑地为这种情况编写测试用例？

编辑1：

  it("testing for axios", () => {
wrapper.simulate(
  "click",
  {
    preventDefault: () => {}
  },
);
console.log("here");
expect.assertions(1);

它给了我错误：

类型错误：_axios2.default.post 不是函数

如果我不模拟防止默认，它会给我这个

“类型错误：无法读取未定义的属性‘preventDefault’”。

所以我假设我需要在处理preventDefault()后以某种方式模拟axios。我走在正确的道路上吗？怎么解决这个问题呢？

Answer 1

这是解决方案：

\n\n

index.tsx:

\n\n

import React from \'react\';\nimport axios from \'axios\';\n\nexport class SomeComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleLogout = this.handleLogout.bind(this);\n  }\n  public render() {\n    return (\n      <div>\n        <button type="button" value="Logout" onClick={this.handleLogout}>\n          Logout\n        </button>\n      </div>\n    );\n  }\n\n  private handleLogout(event: React.MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n    axios\n      .post(\'/logout\')\n      .then(response => {\n        console.log(response);\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  }\n}\n\n

\n\n

单元测试：

\n\n

index.spec.tsx:

\n\n

import React from \'react\';\nimport { shallow } from \'enzyme\';\nimport axios from \'axios\';\nimport { SomeComponent } from \'./\';\n\njest.mock(\'axios\', () => {\n  return {\n    post: jest.fn()\n  };\n});\n\ndescribe(\'SomeComponent\', () => {\n  describe(\'#handleLogout\', () => {\n    const mockedMouseEvent = {\n      preventDefault: jest.fn()\n    };\n    it(\'should logout correctly\', done => {\n      const mockedData = \'mocked data\';\n      const wrapper = shallow(<SomeComponent></SomeComponent>);\n      expect(wrapper.find(\'button\')).toHaveLength(1);\n      (axios.post as jest.MockedFunction<typeof axios.post>).mockResolvedValueOnce(mockedData);\n      const consoleLogSpyOn = jest.spyOn(console, \'log\');\n\n      wrapper.find(\'button\').simulate(\'click\', mockedMouseEvent);\n      expect(wrapper.find(\'button\').text()).toBe(\'Logout\');\n      expect(axios.post).toBeCalledWith(\'/logout\');\n\n      setImmediate(() => {\n        expect(consoleLogSpyOn).toBeCalledWith(mockedData);\n        consoleLogSpyOn.mockRestore();\n        done();\n      });\n    });\n\n    it(\'should throw error when axios post error\', done => {\n      const mockedError = new Error(\'network error\');\n      const wrapper = shallow(<SomeComponent></SomeComponent>);\n      expect(wrapper.find(\'button\')).toHaveLength(1);\n      (axios.post as jest.MockedFunction<typeof axios.post>).mockRejectedValueOnce(mockedError);\n      const consoleLogSpyOn = jest.spyOn(console, \'log\');\n      wrapper.find(\'button\').simulate(\'click\', mockedMouseEvent);\n      expect(wrapper.find(\'button\').text()).toBe(\'Logout\');\n      expect(axios.post).toBeCalledWith(\'/logout\');\n\n      setImmediate(() => {\n        expect(consoleLogSpyOn).toBeCalledWith(mockedError);\n        consoleLogSpyOn.mockRestore();\n        done();\n      });\n    });\n  });\n});\n\n

\n\n

100%覆盖率的单元测试结果：

\n\n

import React from \'react\';\nimport axios from \'axios\';\n\nexport class SomeComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleLogout = this.handleLogout.bind(this);\n  }\n  public render() {\n    return (\n      <div>\n        <button type="button" value="Logout" onClick={this.handleLogout}>\n          Logout\n        </button>\n      </div>\n    );\n  }\n\n  private handleLogout(event: React.MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n    axios\n      .post(\'/logout\')\n      .then(response => {\n        console.log(response);\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  }\n}\n\n

\n\n

这是完成的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/54555039

\n