如何用反应钩来测试组件？
如何用反应钩来测试组件？
提问于 2019-05-13 15:12:23
目前正在尝试用钩子(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？我还知道，使用挂载更有利于集成测试。
回答 1
Stack Overflow用户
发布于 2020-11-26 02:44:45
您收到的警告不是由每次查看时使用钩子引起的，而是由引起的，因为您有一个导致状态更新的副作用。
组件的初始呈现之后发生了一些事情:从dbLoadIssuerDeals服务中获取数据并更新本地状态，从而导致重呈现。但是，您的测试在第一个呈现之后立即运行，这意味着它无法正确断言在效果之后发生的任何事情。您基本上只能测试是否显示了MainPageLoading，但没有其他分支语句。React的act测试API警告您这一点。
在act中运行您的代码可以保证执行状态更新和排队的副作用。换句话说，它允许您“等待”状态更新所产生的更改。您可以在act中阅读更多关于React的官方文件的内容。
我建议使用反应测试库代替酶或直接反应DOM的测试工具。它为您包装了act中的更新和事件，允许您编写更有表现力的测试，而无需模板。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56115239
复制相关文章
相似问题
腾讯云开发者
