Тестирование вложенных компонентов с помощью Jest и snapshot возвращает ноль - PullRequest
Новая
       42

Тестирование вложенных компонентов с помощью Jest и snapshot возвращает ноль

1 голос
/ 28 февраля 2020

Я пытаюсь создать SelectColumn.test.js аналогично Summary.test.js

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

Но, к сожалению, не удачно, я попробовал все решения с форумов кода. Но, похоже, я делаю что-то не так.

Результат: не удалось

Ожидаемый результат должен быть: пройден

Ошибка:

реакции-модал: не найдены элементы для селектора # root. 

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

Отредактировано 01.03.2020:

Я добавил <div id="root"> с исправленной ошибкой:

реагирующий режим: не найдены элементы для селектора # 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, но это кажется, не является решением.

Отредактировано 04.03.2020:

Теперь я изменил свой код, чтобы он проверял основной компонент из 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);

1 Ответ

1 голос
/ 29 февраля 2020

Кажется, #root не является элементом SelectColumn ? но в вашем тестовом случае вы просто импортируете SelectColumn и хотите сравнить снимок? Поэтому я думаю, React-Modal не может работать правильно в этом контексте, потому что он не может найти элемент #root в этой области тестирования. Я думаю, что Jest не сделает виртуальный Dom за пределами SelectColumn для этого теста.

Во-первых, я думаю, что вы можете попробовать обернуть <div id="root"> как самый внешний элемент в компоненте SelectColumn, чтобы проверить если проблема как то, что я думаю. Если это удастся, то, возможно, вам следует рассмотреть возможность добавления этого элемента root к этому компоненту, это также делает этот компонент более многократно используемым и отделенным (также я попытался найти #root здесь , но я не могу найти это также, это на более внешнем компоненте?)

...