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后才进行此测试。

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

我觉得使用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();
});

开玩笑/酶-TypeError：div.find不是函数

1 个答案: