javascript - 模拟 React.Suspense 同时保持 React 的其余部分完好无损

Question

我正在尝试写一个 Jest使用 React.Suspense 的组件的单元测试.

正在测试的组件模块的简化版本:

MyComponent.js

import React from 'react';

export default () => <h1>Tadaa!!!</h1>;

MySuspishedComponent.js

import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

export default () => (
    <Suspense fallback={<div>Loading…</div>}>
        <MyComponent />
    </Suspense>
);

天真地，在我的第一次尝试中，我编写了一个使用 Enzyme 的单元测试。安装悬挂组件:

MySuspishedComponent.test.js

import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';

test('the suspended component renders correctly', () => {
    const wrapper = mount(<MySuspendedComponent />);
    expect(wrapper.html()).toMatchSnapshot();
});

这会导致测试崩溃并显示错误消息:

Error: Enzyme Internal Error: unknown node with tag 13

在网上搜索错误消息，我发现这很可能是由于 Enzyme 尚未准备好渲染 Suspense (尚未)造成的。

如果我使用 shallow 而不是 mount，错误消息将更改为:

Invariant Violation: ReactDOMServer does not yet support Suspense

我的下一次尝试是使用虚拟传递组件模拟 Suspense，如下所示:

MySuspishedComponent.test.js

import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';

jest.mock('react', () => {
    const react = require.requireActual('react');
    return () => ({
        ...react,
        Suspense({ children }) {
            return children;
        }
    });
});

test('the suspended component renders correctly', () => {
    const wrapper = mount(<MySuspendedComponent />);
    expect(wrapper.html()).toMatchSnapshot();
});

这个想法是有一个 React 模块的模拟实现，其中包含 React 库中的所有实际代码，只有 Suspense 被模拟函数替换。

我已将此模式与 requireActual 一起使用，如 Jest documentation 中所述。 ，在模拟 React 以外的其他模块时，在其他单元测试中成功，但使用 React 时，它不起作用。

我现在得到的错误是:

TypeError: (($_$w(...) , react) || ($$w(...) , _load_react(...))).default.createElement is not a function

…我认为，这是由于在我的模拟技巧之后 React 的原始实现不可用造成的。

如何模拟 Suspense，同时保持 React 库的其余部分完好无损？

或者还有其他更好的方法来测试悬挂的组件吗？

Answer 1

解决方案不是使用对象扩展来导出原始 React 模块，而是简单地覆盖 Suspense 属性，如下所示:

MySuspishedComponent.test.js

import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';

jest.mock('react', () => {
    const React = jest.requireActual('react');
    React.Suspense = ({ children }) => children;
    return React;
});

test('the suspended component renders correctly', () => {
    const wrapper = mount(<MySuspendedComponent />);
    expect(wrapper.html()).toMatchSnapshot();
});

这将按预期创建以下快照:

MySuspishedComponent.test.js.snap

exports[`the suspended component renders correctly 1`] = `"<h1>Tadaa!!!</h1>"`;