使用 Jest 和快照测试嵌套组件返回 null答案

【问题标题】：Testing nested components with Jest and snapshot returns null使用 Jest 和快照测试嵌套组件返回 null
【发布时间】：2020-02-28 16:22:17
【问题描述】：

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

https://gitlab.com/sosy-lab/software/benchexec/-/blob/SelectColumn.test/benchexec/tablegenerator/react-table/src/tests/SelectColumn.test.js

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

结果：失败

预期结果应该是：通过

错误：

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

      180 | 
      181 |   render() {
    > 182 |     ReactModal.setAppElement("#root");
          |                ^
      183 |     return (
      184 |       <ReactModal
      185 |         className="overlay"

于 2020 年 3 月 1 日编辑：

我添加了<div id="root"> 修复了错误：

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

但现在出现了新错误：

TypeError: parentInstance.children.indexOf 不是函数

在代码中：

      81 |           .create(<Overview data={data} />)
      82 |           .getInstance();
    > 83 |         const component = renderer.create(component_func(overview));
         |                                    ^
      84 | 
      85 |         expect(component).toMatchSnapshot();
      86 |       });

我尝试将ReactModal.setAppElement 移至componentDidMount，但这似乎不是解决方案。

于 2020 年 3 月 4 日编辑：

现在我更改了我的代码，因此它从App.js 的主要组件进行测试，效果很好，但我只想测试子组件SelectColumn。我尝试使用shallow 和find，但快照始终是exports[...] = null;

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);

【问题讨论】：

标签： javascript reactjs testing integration-testing

【解决方案1】：

似乎#root 不是SelectColumn 中的元素？但是在您的测试用例中，您只需导入SelectColumn 并想要进行快照比较？所以我认为 React-Modal 在这种情况下不能正常工作，因为它在这个测试范围内找不到#root 元素。我认为 Jest 不会在 SelectColumn 之外为这个测试创建虚拟 Dom。

首先，我认为您可以尝试将<div id="root"> 包装为SelectColumn 组件中的最外层元素，以验证问题是否与我想的一样。如果它成功了，那么也许你应该考虑将这个根元素添加到这个组件中，它也使这个组件更加可重用和解耦（我也试图找到#roothere，但我也找不到它，是不是在更多外部组件？）

【讨论】：

不幸的是，这对我不起作用：react-modal: No elements were found for selector #root. 22 | 23 | componentDidMount() {` > 24 | ReactModal.setAppElement("#root"); | ^ 25 | 26 | // -------------------------渲染---------- --- 27 | renderRunSets = () => {
@Martin，不好意思，我不小心，这应该是运行测试的问题，更新了答案，希望对你有帮助！
感谢这个错误似乎已修复，但现在它给了我另一个错误：TypeError: parentInstance.children.indexOf is not a function in line:83 | const component = renderer.create(component_func(overview));
@Martin，这也是测试中的错误吗？您是否创建了一个 ID 为 #root 的元素？如果你这样做了，也许你可以尝试将你的ReactModal.setAppElement 再次移动到componentDidMount，实际上如果你创建另一个问题并提供更多信息会更好:)

【解决方案2】：

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

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

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。
我认为代码是不言自明的。也许我猜错了。我将在回复中添加一些 cmets。

【解决方案3】：

a suggested solution 不是删除模态进行测试，而是将setAppElement 调用移到项目的测试范围之外。我一直在“模态”包装组件中调用它，但我将其移出到我的条目 App.js 文件中（它从未真正运行用于测试）。

如果你真的需要测试它，你可以这样做：

ReactModal.setAppElement(document.createElement('div'));
describe("test component that uses modal", () => {
   ...
});

【讨论】：

【解决方案4】：

我的情况 ContactForm 是我使用模型的组件下面的代码有助于在测试时摆脱错误

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

【讨论】：