javascript - 如何使用 react 钩子(Hook)对组件进行单元测试？

Question

目前正在尝试使用钩子(Hook)(useState 和 useEffects)对组件进行单元测试。
正如我所读到的，生命周期只能通过安装而不是浅渲染来测试。

实现代码:

export function MainPageRouter({issuerDeals, match, dbLoadIssuerDeals}) {
console.log("MainPageRouter")
const [isLoading, setIsLoading] = useState(true);


const selectedIssuerId = match.params.id;
const issuerDeal = filterIssuerDealByIssuerId(issuerDeals, 
selectedIssuerId);

useEffect(() => {
   dbLoadIssuerDeals(selectedIssuerId)
     .then(() => {
        setIsLoading(false);
      })
     .catch(function (error) {
        setIsLoading(false);
        });
  }, [selectedIssuerId]);

  if (isLoading) {
    return <MainPageLoading />
  } else if(issuerDeal.length > 0) {
    return <MappedDeal match={match}/>
  } else {
    return <MapDeal match={match}/>
  }

}

const mapStateToProps = state => {
  return {
    deals: state.deals,
    issuerDeals: state.issuerDeals
  }
};

const mapDispatchToProps = {
  dbLoadIssuerDeals
}

export default connect(mapStateToProps, mapDispatchToProps)(MainPageRouter);

但是，这样做会导致此错误:

Warning: An update to MainPageRouter inside a test was not wrapped in 
act(...).

When testing, code that causes React state updates should be wrapped into 
act(...):

act(() => {
  /* fire events that update state */
});

测试:

it('Should render Mapped Deal', () => {
    const dbLoadIssuerDeals = jest.fn(() => Promise.resolve({
        payload:{ deals: { dealid: "1", sourceCode: "TEST" }, issuerId: "1" } }))
    const props = createProps(issuerDeals, dbLoadIssuerDeals);
    const mainPageRouter = mount(<MemoryRouter><MainPageRouter{...props} /></MemoryRouter>);
});

有没有一种干净的方法来测试 mainPageRouter 是否会返回 MappedDeal 或 MapDeal？我也明白使用 mount 更倾向于集成测试。

Answer 1

您收到的警告不是由每次看到使用钩子(Hook)引起的，而是 因为你有一个导致状态更新的副作用 .
在您的组件初始渲染后发生了一些事情:您正在从 dbLoadIssuerDeals 获取数据服务并更新本地状态，导致重新渲染。但是，您的测试在第一次渲染后立即运行，这意味着它无法正确断言效果之后发生的任何事情。你基本上只能测试 MainPageLoading显示，但没有其他分支语句。 React 的 act testing API 会警告您。
在 act 中运行您的代码保证状态更新和排队副作用的执行。换句话说，它让你“等待”状态更新导致的变化。您可以阅读有关 act 的更多信息在 React's official docs .
我建议使用 React Testing Library而不是直接使用 Enzyme 或 React DOM 的测试工具。它将更新和事件包装在 act 中对你来说，允许你在没有样板的情况下编写更具表现力的测试。