Jest/Enzyme - TypeError: div.find не является функцией
Ниже приведен небольшой тестовый файл, который я сделал для проекта 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 is not a function
Первоначально я построил этот тест, увидев этот ответ на переполнение стека.
Я не уверен, как устранить эту проблему, но я предполагаю, что, возможно, я неправильно «смонтировал» компонент в этом тесте? В той же ветке переполнения стека из предыдущей ссылки, этот ответ показывает, как вы будете монтировать компонент, но в другом комментарии к этому ответу говорится, что для этого необходимо установить другой пакет.
Я как бы подумал, что использование переменной div в качестве контейнера для поиска с помощью find будет работать, но я ошибаюсь, думая так?
Вам нужно следовать правильному руководству, а не прыгать с ответов stackoverflow. Вы находитесь в неправильном направлении. Вам не хватает монтирования или поверхностного рендеринга в вашем коде и на котором вы запускаете .find ReactDOM не тестовый рендерер, в вашем случае энзим
.find находится в Enzyme API -- Я думаю, что импорт фермента будет включать .find, но, может быть, я ошибаюсь?
Посмотрев на другой пост SO, они используют .find для компонента реакции, а не для собственного объекта элемента javascript. Так что вам понадобится expect(Component1.find(<Component2 />).exists()).toBeTruthy();
@Rikin спасибо - я посмотрю на монтаж и на то, как это работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот пример кода для вас, возможно, не на 100% то, что вам нужно, но вы должны начать. Я также включил console.info, чтобы вы знали, что будет отображаться.
Чтобы немного объяснить, что происходит, в вашем тестовом примере вы вызываете метод 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.info(wrapper);
expect(wrapper.find('.closed').exists()).toBeTruthy();
});
Спасибо, это проходит! Я посмотрю, как это работает.
Я также видел это ранее, когда искал информацию - не прочитал ее полностью, но решил поделиться ею - kentcdodds.com/blog/why-i-never-use-shallow-rendering - не уверен, что у вас есть какие-либо мысли по этому поводу! В любом случае, я буду изучать ферменты shallow и mount больше.
Зависит от необходимости, я бы сказал. Но загляните в его библиотеку react-testing-library проще ужиться и играть с ней. В этом случае вам не нужен фермент.
.find- это метод jquery, а не родной для javascript