我应该如何测试使用 Typescript 进行 api 调用的 React Hook “useEffect”？

Question

我正在使用 Typescript 和新的 React 钩子为一个简单的 React 应用程序编写一些玩笑酶测试。

但是，我似乎无法正确模拟在 useEffect 挂钩内进行的 api 调用。

useEffect 进行 api 调用并使用“setData”更新useState 状态“data”。

然后将对象“数据”映射到一个表格中到其对应的表格单元格。

这似乎应该很容易通过模拟 api 响应和酶安装来解决，但我不断收到错误消息，告诉我使用 act() 进行组件更新。

我尝试了多种方式使用act()，但无济于事。我尝试用 fetch 替换 axios 并使用酶浅层和 react-test-library 的渲染，但似乎没有任何效果。

组件：

import axios from 'axios'
import React, { useEffect, useState } from 'react';

interface ISUB {
  id: number;
  mediaType: {
    digital: boolean;
    print: boolean;
  };
  monthlyPayment: {
    digital: boolean;
    print: boolean;
  };
  singleIssue: {
    digital: boolean;
    print: boolean;
  };
  subscription: {
    digital: boolean;
    print: boolean;
  };
  title: string;
}

interface IDATA extends Array<ISUB> {}

const initData: IDATA = [];

const SalesPlanTable = () => {
  const [data, setData] = useState(initData);
  useEffect(() => {
    axios
      .get(`/path/to/api`)
      .then(res => {
        setData(res.data.results);
      })
      .catch(error => console.log(error));
  }, []);

  const renderTableRows = () => {
    return data.map((i: ISUB, k: number) => (
      <tr key={k}>
        <td>{i.id}</td>
        <td>
          {i.title}
        </td>
        <td>
          {i.subscription.print}
          {i.mediaType.digital}
        </td>
        <td>
          {i.monthlyPayment.print}
          {i.monthlyPayment.digital}
        </td>
        <td>
          {i.singleIssue.print}
          {i.singleIssue.digital}
        </td>
        <td>
          <button>Submit</button>
        </td>
      </tr>
    ));
  };

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>MediaType</th>
          <th>MonthlyPayment</th>
          <th>SingleIssue</th>
          <th/>
        </tr>
      </thead>
      <tbody'>{renderTableRows()}</tbody>
    </table>
  );
};

export default SalesPlanTable;

测试：

const response = {
  data: {
    results: [
      {
        id: 249,
        mediaType: {
          digital: true,
          print: true
        },
        monthlyPayment: {
          digital: true,
          print: true
        },
        singleIssue: {
          digital: true,
          print: true
        },
        subscription: {
          digital: true,
          print: true
        },
        title: 'ELLE'
      }
    ]
  }
};

//after describe

it('should render a proper table data', () => {
    const mock = new MockAdapter(axios);
    mock.onGet('/path/to/api').reply(200, response.data);
    act(() => {
      component = mount(<SalesPlanTable />);
    })
    console.log(component.debug())
  });

我希望它记录表格的 html 并呈现表格正文部分，我尝试了一些异步和不同的方法来模拟 axios，但我一直只得到表格标题或消息：@987654330 的更新@ inside a test is not Wrap in act(...). 我找了好几个小时才找到解决办法，但找不到任何可行的方法，所以我决定鼓起勇气在这里问。

Answer 1

这里有两个问题

---

异步调用setData

setData 在Promise 回调中被调用。

一旦Promise 解决，任何等待它的回调都会在PromiseJobs queue 中排队。 PromiseJobs 队列中的所有待处理作业在当前消息完成之后和下一个消息开始之前运行。

在这种情况下，当前正在运行的消息是您的测试，因此您的测试在 Promise 回调有机会运行之前完成，并且在您的测试完成之后之前不会调用 setData。

您可以通过使用类似setImmediate 的方式来解决此问题，以延迟您的断言，直到 PromiseJobs 中的回调有机会运行之后。

看起来您还需要调用 component.update() 以使用新状态重新渲染组件。 （我猜这是因为状态更改发生在 act 之外，因为没有任何方法可以将回调代码包装在 act 中。）

总而言之，工作测试如下所示：

it('should render a proper table data', done => {
  const mock = new MockAdapter(axios);
  mock.onGet('/path/to/api').reply(200, response.data);
  const component = mount(<SalesPlanTable />);
  setImmediate(() => {
    component.update();
    console.log(component.debug());
    done();
  });
});

---

警告：对 ... 的更新未包含在 act(...) 中

警告由在act 之外发生的组件状态更新触发。

由useEffect 函数触发的对setData 的异步调用导致的状态更改将始终发生在act 之外。

这里有一个非常简单的测试来演示这种行为：

import React, { useState, useEffect } from 'react';
import { mount } from 'enzyme';

const SimpleComponent = () => {
  const [data, setData] = useState('initial');

  useEffect(() => {
    setImmediate(() => setData('updated'));
  }, []);

  return (<div>{data}</div>);
};

test('SimpleComponent', done => {
  const wrapper = mount(<SimpleComponent/>);
  setImmediate(done);
});

当我在搜索更多信息时，我偶然发现了 10 小时前刚开业的 enzyme issue #2073 谈论同样的行为。

我添加了上述测试in a comment 以帮助enzyme 开发人员解决问题。

Answer 2

解决方案

它既有效又摆脱test was not wrapped in act(...)警告。

const waitForComponentToPaint = async (wrapper) => {
   await act(async () => {
     await new Promise(resolve => setTimeout(resolve, 0));
     wrapper.update();
   });
};

用法：

it('should do something', () => {
    const wrapper  = mount(<MyComponent ... />);
    await waitForComponentToPaint(wrapper);
    expect(wrapper).toBlah...
})

感谢...

这是 edpark11 在issue @Brian_Adams 在他的answer 中提到的一种解决方法。

原帖：https://github.com/enzymejs/enzyme/issues/2073#issuecomment-565736674

为了存档，我复制了这里的帖子并进行了一些修改。