Question

当前尝试使用挂钩对单元进行测试（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

您收到的警告不是使用 per see 钩子引起的，而是因为您有导致状态更新的副作用。

在组件的初始渲染之后发生了一些事情：您正在从dbLoadIssuerDeals服务中获取数据并更新本地状态，从而导致重新渲染。但是，您的测试将在第一个渲染后立即运行，这意味着无法正确断言在效果之后发生的任何事情。您基本上只能测试显示了MainPageLoading，而没有其他分支语句。 React的act测试API会警告您。

在act中运行代码可确保状态更新的执行和排队的副作用。换句话说，它使您可以“等待”状态更新导致的更改。您可以在React's official docs中阅读有关act的更多信息。

我建议直接使用React Testing Library代替酶或React DOM的测试实用程序。它将更新和事件包装在act中，使您无需编写样板即可编写更具表现力的测试。

如何使用React钩子对组件进行单元测试？

1 个答案: