Question

我正在学习使用React和Jest进行一些测试，并且遇到一些需要指导的问题。

我的react组件中有一个注销方法，如下所示：

  doLogout = async () => {
    const url = "/api/logout";

    let response;

    try {
      response = await fetch(url, { method: "post" });
    } catch (err) {
      alert("Failed to connect to server: " + err);
      return;
    }

    if (response.status !== 204) {
      alert("Error when connecting to server: status code " + response.status);
      return;
    }

我的测试报告说，我想用这种方法发现一些未发现的行：

headerbar.jsx |    78.95 |       75 |      100 |    78.95 |       21,22,26,27

第21行：alert("Failed to connect to server: " + err);

第22行：return;

第26行：alert("Error when connecting to server: status code " + response.status);

第27行：return;

所有这些行都来自上面的代码，我是测试的新手，我希望获得有关这些行的指导以及如何在测试中介绍它们。

Answer 1

您基本上必须测试Network error并收到状态不是204的响应。另外，如果您真的想测试alert，则必须对其进行监视。

我个人使用axios-mock-adapter测试我的API调用，使用它，您剩余的测试将如下所示：

import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);
mock.onPost(url).networkError();

const alert = jest.spyOn(window, 'alert');

//mount your component and simulate your function

expect(alert).toHaveBeenCalledWith('Failed to connect to server: Network Error');
mock.restore();
alert.mockClear();

和

import MockAdapter from 'axios-mock-adapter';

mock.onPost(url).reply(200, 'status code other than 204');

const alert = jest.spyOn(window, 'alert');

//mount your component and simulate your function

expect(alert).toHaveBeenCalledWith('Error when connecting to server: status code 200');

React Jest测试问题

1 个答案: