React jest快照仅返回空DocumentFragment

Question

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

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

我正在尝试使用test -library和jest来测试它，如下所示：

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

但是，当我检查快照时，我只看到<DocumentFragment />。我可以通过getByTestId(modal-client-id)测试模式是否在那里，当我使用完全相同的道具在Storybook中运行时，我可以看到模式正在呈现和出现。当我删除周围的Modal组件时，快照也可以工作并返回内部组件。为什么快照只返回DocumentFragment而不返回完整快照？这是否仅仅意味着在单元测试中组件不会呈现？

Answer 1

Testing-Library render将传入的组件附加到父div。这与渲染函数的Container选项相对应。默认情况下，Testing-Library会创建一个div并附加到该div。在模式的情况下，模式是一个单独的弹出窗口，它没有呈现为div的子级，这解释了为什么片段只呈现为：

<DocumentFragment>
    <div />
</DocumentFragment>

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

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

这避免了尝试指定容器或baseElement选项的麻烦，因为渲染的任何内容都将在顶部渲染。