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

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

您收到的警告不是由使用 hooks per see引起的，而是因为您有导致 state update 的副作用。

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

运行代码可以act保证状态更新和排队副作用的执行。换句话说，它可以让您“等待”状态更新导致的更改。act您可以在React 的官方文档中阅读更多相关内容。

我建议直接使用React 测试库而不是 Enzyme 或 React DOM 的测试实用程序。它为您封装了更新和事件act，使您可以在没有样板的情况下编写更具表现力的测试。