Jest / Enzyme - TypeError: div.find не является функцией

Question

Ниже приведен небольшой тестовый файл, который я создал для проекта React, в котором для тестирования используются как Jest, так и Enzyme. В этом тесте я просто пытаюсь найти элемент в компоненте и увидеть, что он существует (как истинно условный). Весь смысл этого теста состоял не только в том, чтобы увидеть, существует ли элемент, но я решил, что начну здесь. Я очень новичок в тестировании, так что этот синтаксис / реализация может помешать:

import React from 'react';
import ReactDOM from 'react-dom';

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import HamburgerIcon from './HamburgerIcon';

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

test('my first test -- will add better text here later', () => {
  const div = document.createElement('div');
  ReactDOM.render(<HamburgerIcon />, div);

  expect(div.find('.closed').exists()).toBeTruthy();

  ReactDOM.unmountComponentAtNode(div);
});

Запуск этого приводит к этой ошибке:

TypeError: div.find не является функцией

Я изначально построил этот тест, увидев ответ на переполнение стека .

Я не уверен, как решить эту проблему, но я предполагаю, что, возможно, я не "правильно" смонтировал компонент в этом тесте? В том же потоке переполнения стека из предыдущей ссылки этот ответ показывает, как вы должны монтировать компонент , но в другом комментарии к этому ответу говорится, что для этого необходимо установить другой пакет.

Я как-то полагал, что использование переменной div в качестве контейнера для поиска с помощью find будет работать, но я ошибаюсь, думая, что?

Answer 1

Вот пример кода для вас, он может быть не на 100% тем, что вам нужно, но вам следует начать.Я также включил console.log, чтобы вы знали, что визуализируется.

Чтобы объяснить немного, что происходит, вы в своем тестовом примере вызываете метод shallow и передаете ему компонент React для визуализации.Тестовые случаи запускаются в виртуальном браузере / рендерере, а не в реальном браузере (если вы не настроили его таким образом).

import React from 'react';
import ReactDOM from 'react-dom';

import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import HamburgerIcon from './HamburgerIcon';

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

test('my first test -- will add better text here later', () => {
  const wrapper = shallow(<HamburgerIcon />);
  console.log(wrapper);
  expect(wrapper.find('.closed').exists()).toBeTruthy();
});