React jest 快照仅返回空 DocumentFragment

Question

我正在使用 React 并编写一个 Modal 组件，如下所示：

const MyModal: FC<MyModalProps> = memo((props) => {
    return (
        <Modal isOpen={true} data-client-id={modal-client-id}>
            ...
        </Modal>
    );
});

我正在尝试使用测试库和笑话来测试它，如下所示：

    const { asFragment } = render(<MyModal {...myTestProps} />);
    const renderFragment = asFragment();
    expect(renderFragment).toMatchSnapshot();

但是，当我检查快照时，我只看到<DocumentFragment />. 我可以通过 a 测试模态是否存在，getByTestId(modal-client-id)并且当我使用完全相同的道具在 Storybook 中运行时，我可以看到模态正在渲染并出现。当我删除周围的模态组件时，快照也可以工作并返回内部组件。Snapshot 只返回 DocumentFragment 而不是完整快照是否有原因？这是否仅仅意味着在单元测试中组件没有渲染？

Answer 1

测试库渲染将传入的组件附加到父 div。这与渲染函数的Container选项相对应。默认情况下，Testing-Library 创建一个 div 并附加到它。对于模态框，模态框是一个单独的弹出窗口，它不会被渲染为 div 的子级，这解释了为什么片段仅渲染为：

<DocumentFragment>
    <div />
</DocumentFragment>

为了调试这个问题，打印出渲染的屏幕给出了线索​​：screen.debug()。这表明模态是在容器 div 之外渲染的，这就是其他查询/获取能够找到组件的原因。或者，我们也可以覆盖baseElement选项，如果未指定，则默认为 document.body。就我而言，因为任何呈现的模式都会正确呈现在组件顶部，所以我这样做：

const result = render(<MyModal {...myTestProps} />);
const modalComponent = screen.getByTestId('modal-client-id');
expect(modalComponent).toMatchSnapshot();

这可以避免尝试指定容器或基本元素选项而造成混乱，因为渲染的任何内容都将渲染在顶部。