Javascript 测试绑定了React而没有React的React组件库时出现Jest错误

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

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

configure({ adapter: new Adapter() })

另外，我有我的组件库，用于传输文件，为了测试，我创建了一个基本表单组件，它基本上只是一个空表单，我可以在演示应用程序中使用它，但当我做一个简单的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 />)
  })
})

所以我很有信心我的问题是，因为我的React组件库没有在包中包含React，所以任何使用JSX的测试都会失败。一旦修复，我将不得不找出Jest失败的原因，可能是我没有阅读更新的文档，因为快速浏览这些文档表明我应该这样做：

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

const wrapper=shallow（）；
expect（wrapper.contains（））.to.equal（true）；

---

更新3：通过向json添加酶并将组件与快照进行比较，修复了Jest错误。仍然需要研究如何在Jest测试中包含React。

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

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

//tests

---

使用

jest

作为独立的渲染器，您需要react渲染器。由于您使用的是

enzyme

，因此需要在名为

setupTests.js的文件中配置enzyme适配器：

然后，您可以在
jest.config
中引用该文件：

“setupfileafterenv”：[“src/setupTests.js”]
如我的更新中所述，我认为我必须接受这样的解决方案，即在我的React组件库中修改我的React组件以导入React。在他们将React视为已包含在外部库之前。然后shallow有一个空的测试包装器，所以我将该酶添加到json库中来比较json，结果它成功了。现在，我的快照反映了我试图在Jest测试中呈现的React组件

除非其他人能给我一个更好的答案，否则我只能接受这个答案，但在我试图使我的库对React具有外部对等依赖性之前，运行React并不需要我导入它，但Jest确实需要我导入它。
抱歉，是的，这是我意外遗漏的内容。我已将Jest配置为查看包含适配器配置的setup.js文件。说到这里，我注释掉了我的setup.js文件内容，我尝试了一下，但仍然得到了相同的错误。对不起，是的，这是我不小心漏掉的。我已经将Jest配置为查看包含适配器配置的setup.js文件。我更新了我的问题，将其包括在内，因为这似乎是一个常见的建议。
import React from 'react'
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

//tests

npm i -D enzyme-adapter-react-16

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

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

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