反应开玩笑的快照只返回空的 DocumentFragment

Question

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

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

我正在尝试使用 testing-library 来测试它，开个玩笑：

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

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

Answer 1

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

<DocumentFragment>
    <div />
</DocumentFragment>

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

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

这避免了试图指定容器或 baseElement 选项的混乱，因为任何呈现的内容都将呈现在顶部。

反应开玩笑的快照只返回空的 DocumentFragment

React jest snapshot only returning empty DocumentFragment

reactjs

jestjs

testing-library