Jest + React 测试库：门户没有被清理

Question

据我了解，React 测试库会在每次测试后自动清理您的 DOM（至少在您使用 Jest 时）。

这适用于在我的 root 节点内呈现的任何内容，但在 root 之外使用 Portals 呈现的任何内容都不会被清理并在测试中保持不变。

不幸的是，我的一些组件依赖于使用门户呈现的modal 组件，因此一旦打开此组件，我就无法在后续测试中将其从 DOM 中删除。

我该如何解决这个问题？

Answer 1

我与ant-design 有完全相同的问题，我找到了 2 个解决方案。

解决方案 #1，在调用 render 时添加一个附加选项 container: document.body（适用于警告，testing-library 不鼓励）

render(<CreateOrEditAvailability isEdit={false} />, { initialState, container: document.body });

警告：

• 没有。 1

Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:88:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:5)
      at topLevelUpdateWarnings (node_modules/react-dom/cjs/react-dom.development.js:24664:7)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24733:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:99:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)

• 没有。 2

Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:88:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:5)
      at topLevelUpdateWarnings (node_modules/react-dom/cjs/react-dom.development.js:24668:7)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24733:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:99:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)

解决方案 #2，在 afterEach 中使用 removeChild 手动删除模式

afterEach(() => {
    const modals = document.querySelectorAll('.ant-modal-wrap');
    modals.forEach((modal) => modal.parentNode.removeChild(modal));
});

test('blah blah', () => {
    render(<CreateOrEditAvailability isEdit={false} />, { initialState });
    ...
});