Javascript 使用Jest和快照测试嵌套组件时返回null

我正在尝试创建类似于Summary.test.js的

SelectColumn.test.js

但不幸的是没有成功，我尝试了代码论坛上的所有解决方案。但我似乎做错了什么

结果：失败

预期结果应为：通过

错误：

反应模式：未找到选择器#根的元素

似乎

#root

不是中的一个元素？但是在您的测试用例中，您只需导入

SelectColumn

，并想要进行快照比较？因此我认为，React-Modal在这种情况下不能正常工作，因为它在这个测试范围内找不到

#root

元素。我认为Jest不会在本测试的

SelectColumn

之外创建虚拟Dom

---

首先，我认为您可以尝试将

包装为

SelectColumn

组件中最外面的元素，以验证问题是否与我所想的一样。如果它成功了，那么也许你应该考虑将这个根元素添加到这个组件中，它也使这个组件更可重用和解耦（我也试图找到<代码>根root < /代码>，但是我也找不到它，它在更多的外部组件上吗？

在运行测试时，reactModal DOM不可用，因此通过过滤测试用例，它不会将#root元素设置为null

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root');

---

将

setAppElement

调用移出项目的测试范围，而不是删除测试的模式。我一直在一个“模态”包装器组件中调用它，但我将它移到了我的条目

App.js

文件中（该文件从未真正运行过测试）

如果您确实需要测试它，您可以这样做：

ReactModal.setAppElement（document.createElement（'div'））；
描述（“使用模态的测试组件”，（）=>{
...
});

Im我的案例ContactForm是我使用模型的组件 下面的代码有助于消除测试时的错误

describe("test component that uses modal", () => {
  it('renders without crashing', () => {
    render(
      ReactModal.setAppElement(document.createElement('div')),
      <ContactForm> </ContactForm>
    );
  });
});

描述（“使用模态的测试组件”，（）=>{
它（'渲染而不崩溃'，（）=>{
渲染(
ReactModal.setAppElement（document.createElement（'div'）），
);
});
});

不幸的是，这对我不起作用：

react-modal:找不到选择器#root的元素。

22 | 23 | componentDidMount（）{`>24 | ReactModal.setAppElement（#root”）；|^25}26 |/------------------------------------渲染-----------------27 |渲染集=（）=>{@Martin，对不起，我粗心了，这应该是运行测试的问题，更新了答案，希望有帮助！谢谢，这个错误似乎已修复，但现在它给了我另一个错误：

TypeError:parentInstance.children.indexOf不是一个函数：
83 | const component=renderer.create（component_func（概述））
@Martin，这也是测试中的错误吗？你是否创建了一个id为
#root
的元素？如果创建了，也许你可以尝试将你的
ReactModal.setAppElement
再次移动到
componentDidMount
，事实上，如果你创建另一个问题并提供更多信息会更好：）请不要只发布代码作为答案，而是发布also解释你的代码是什么，以及它如何解决问题。带有解释的答案通常更有帮助，质量更好，更容易吸引选民。我认为代码是非常自我解释的。也许我想错了。我将在回答中添加一些注释。
import React from "react";
import SelectColumn from "../App.js";
import { test_snapshot_of } from "./utils.js";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

// mock uniqid to have consistent names
// https://stackoverflow.com/a/44538270/396730
jest.mock("uniqid", () => i => i + "uniqid");

const wrapper = shallow(<SelectColumn />);
const rootElement = wrapper.find("#root");
test_snapshot_of("Render SelectColumn", overview => rootElement);

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root');

describe("test component that uses modal", () => {
  it('renders without crashing', () => {
    render(
      ReactModal.setAppElement(document.createElement('div')),
      <ContactForm> </ContactForm>
    );
  });
});