Question

我已经构建了一段时间的React应用，所以我想创建一个React Component库。我一直在阅读有关方法的内容，并选择了其中一种使用Webpack和Babel捆绑而不使用React的方法，因为如果不这样做，将出现错误，因为将导入两个版本的React（一个在组件库中，一个在应用程序中））。无论如何，我有一个包含以下内容的Jest安装文件：

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

此外，我有一个可编译的组件库，为了进行测试，我创建了一个基本的Form Component，该组件基本上只是一个空表单，可以在演示应用程序中使用它，但是当我进行简单的Jest测试时：

import React from 'react'
import { shallow } from 'enzyme'

import { Form } from './form.js'

describe('Test forms', () => {
  test('render correctly', () => {
    expect(shallow(<Form />)).toEqual(<form />)
  })
})

我收到一个ReferenceError: React is not defined错误。它专门指向我的表单组件的return <form />行。

任何帮助将不胜感激！另外，如果有更好的方法来构建React Component库，请告诉我。谢谢！

更新1：我删除了酶并添加了react-test-renderer，但遇到了相同的错误ReferenceError: React is not defined，但仍然指向表单组件的return <form />行。

更新2：我改回酶。我已注释掉我的Jest安装文件，以确认Jest在未配置适配器的情况下不会运行测试，并得到您期望的错误，因此我相信不是那样。为了缩小问题的范围，我在组件中导入了React，现在得到了另一个错误：

- Expected
+ Received

- <form />
+ ShallowWrapper {}

   8 | describe('Test forms', () => {
   9 |   test('render correctly', () => {
> 10 |     expect(shallow(<Form />)).toEqual(<form />)
     |                               ^
  11 |     // const renderer = ReactTestRenderer.create(<Form />)
  12 |     // expect(renderer.toJSON()).toMatchSnapshot()
  13 |   })

所以我很确定我的问题是，由于我的React Component库中没有包含React，因此任何JSX测试都会失败。然后，一旦解决该问题，我就必须找出Jest失败，这可能只是我没有阅读更新的文档，因为快速浏览那里的文档表明我应该这样做：

const wrapper = shallow(<Component />);
expect(wrapper.contains(<div className="unique" />)).to.equal(true);

更新3：通过添加ase-to-json并将组件与快照进行比较，解决了Jest错误。仍然需要研究如何在Jest测试中包括React。

Answer 1

编写测试之前，您需要配置酶适配器

import React from 'react'
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

//tests

Answer 2

将jest作为独立版本，您将需要react渲染器。由于您使用的是enzyme，因此需要在名为setupTests.js的文件中配置酶适配器：https://airbnb.io/enzyme/docs/installation/

npm i -D enzyme-adapter-react-16

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

然后您可以在jest.config中引用该文件： https://airbnb.io/enzyme/docs/guides/jest.html

 "setupFilesAfterEnv": ["<rootDir>src/setupTests.js"]

Answer 3

正如更新中所记录的那样，我认为我必须解决在我的React Component库中修改我的React Components以导入React的解决方案。在他们将React视为已经包含外部库之前。然后，shallow有一个用于测试的包装器，该包装器是空的，因此我添加了酶转json库来比较json，并且工作正常。现在，我的快照反映了我试图在Jest测试中渲染的React组件。

除非其他人可以给我一个更好的答案，我必须解决这个问题，但是在我试图使我的库具有React的外部对等依赖项之前，运行它并不需要我导入它但是Jest确实要求我导入它。

测试未捆绑React的React Component库时出现玩笑错误

3 个答案: