如何解决如何使用快照子组件进行测试
我正在尝试测试我的反应组件(使用快照测试)。问题是如何渲染子组件?我正在使用Apollo和next.js,页面可以正确渲染,但项目不能。 我的测试是这样的:
describe('tab',() => {
const store = createStore(errorUI);
it('renders correctly',async () => {
let wrapper;
const mocks = [{
request: {
query: Query,},result: { data: { Mocked } }
}];
await act(async () => {
wrapper = TestRenderer.create(
<MockedProvider {...mocks} addTypename={false}>
<Provider store={store}>
<I18nextProvider i18n={i18n}>
<VippedPage { ...Mocked }/>
</I18nextProvider>
</Provider>
</MockedProvider>
)
});
const tree = wrapper.toJSON();
expect(tree).toMatchSnapshot();
});
});
我的组件是这样的:
const Componeny = () => {
const { loading,data,error,fetchMore } = useQuery(query);
const items = data?.items || [];
const itemsList = items && items.map(item => (
<Item
key={item.id}
carousel={true}
itemId={itemId}
setCarousel={setCarousel}
{...item}
/>
));
return (
<EndlessItemsHoc>
{itemsList}
</EndlessVipItems>
)
}
快照就是这样:
<section className="section section-block section-white">
<div className="section-list"/>
</section>
我们的页面甚至没有那么复杂,但是主要的问题在于带有孩子的组件。
感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。