Question

我正在尝试为以下代码编写测试文件。用我目前的代码

None

快照的结果为import React from 'react'; import renderer from 'react-test-renderer'; // import { mount } from 'enzyme'; import LazyToastMessage from '../LazyToastMessage'; import IntlHelper from "test/util/Mount"; import nls from "src/nls/homepageHeader.json"; describe('the suspended toast message component renders correctly', () => { const mountWithNLS = new IntlHelper(nls); it('LazyToastMessage fallback', () => { const mockHandler = jest.fn(); const wrapper = renderer.create(mountWithNLS.mountWithIntl( <LazyToastMessage state message="test message" iconType="success" handleToasterStateChange={mockHandler} />) ) expect(wrapper.toJSON()).toMatchSnapshot(); }) });。如何测试更新的组件并拍摄快照？

惰性组件如下：

null

Answer 1

要对其进行正确的测试，必须在测试中将延迟加载的组件包装在Suspense中。

首先，在您的组件中：

export const LazyToastMessage = ...

然后，在您的测试中：

import SuspendedLazyToastMesssage, {LazyToastMessage} from '../LazyToastMessage';

.
.
.
const wrapper = renderer.create(mountIthNLS(mountWithIntl(
    <Suspense fallback=null>
        <SuspendedLazyToastMessage/>
    </Suspense>
));

await LazyToastMessage;

expect(wrapper.toJSON()).toMatchSnapshot();

或类似的东西，但您明白了...

使用笑话和酶对反应中更新的组件进行单元测试

1 个答案: