Jest/Enzyme - TypeError: div.find 不是函数

Question

下面是我为一个使用 Jest 和 Enzyme 进行测试的 React 项目制作的一个小测试文件。在这个测试中，我只是试图在组件中找到一个元素并查看它是否存在（作为一个真实的条件）。这个测试的重点不仅仅是看看元素是否存在，而是我想我应该从这里开始。我对测试很陌生，所以这种语法/实现可能很疯狂：

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 不是函数

我最初是在看到this Stack Overflow answer 后构建了这个测试。

我不确定如何解决这个问题，但我猜我可能没有在这个测试中正确“安装”组件？在上一个链接的同一个 Stack Overflow 线程中，this answer shows how you would mount a component，但对该答案的另一条评论说需要安装另一个包才能做到这一点。

我有点认为使用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();
});