React Jest 匹配快照，使用子组件测试组件时崩溃答案

【问题标题】：React Jest to match snapshot, crash when testing component with child componentsReact Jest 匹配快照，使用子组件测试组件时崩溃
【发布时间】：2017-02-23 23:28:51
【问题描述】：

我有一些带有来自第三方插件/库的子组件的组件。我使用 Jest 进行单元测试和 toMatchSnapshot() 方法。我尝试使用jest.unmock('ChildComponet.js') 排除子组件，但出现此错误：

jest.unmock('ChildComponet.js') 被调用，但自动模拟被禁用。删除对jest.unmock 的不必要调用或通过jest.enableAutomock(); 启用此测试的自动模拟。此警告可能是 Jest 15 中默认配置更改的结果。

我启用了jest.enableAutomock();，现在我遇到了错误：

TypeError：无法读取未定义的属性“DEFINE_MANY”

我把它放在我的 package.json 上，但没有任何反应：

"unmockedModulePathPatterns": ["rootDir/node_modules/react"]

有什么想法吗？

在 React 中对组件进行单元测试的正确方法是什么？

【问题讨论】：

标签： javascript unit-testing reactjs jestjs

【解决方案1】：

到目前为止，我发现的最简单的模拟 react 组件的方法是使用：

jest.mock('component', ()=> 'ComponentName')

在您要测试的模块的导入语句之前。

第一个参数是全局 npm 模块的名称或本地组件的路径（注意相对于测试文件的路径）。第二个参数只是一个返回字符串的函数（我总是返回我在 jsx 中使用的相同名称）。这将导致转储组件除了与原始组件具有相同名称之外什么都不做。因此，在您的快照中，您将看不到任何区别，除了模拟组件不会呈现任何子组件。

现在是您收到的错误消息。

jest.unmock('ChildComponet.js') 被调用，但自动模拟被禁用...

问题是您使用jest.unmock 而不是jest.mock。 Jest 具有自动模拟模块的所有依赖项的功能。启用自动模拟后，您可以使用jest.unmock 来真正植入一些基本库，如 lodash 或 moment。由于自动模拟功能让很多人感到困惑，他们决定将其设为可选。 Tldr 你试图取消模拟最初没有被模拟的东西，因为你没有启用自动模拟。

TypeError: 无法读取未定义的属性“DEFINE_MANY”

当您启用自动模拟时，每个导入的模块都将替换为 undefined。我不能对unmockedModulePathPatterns 设置说太多，但我相信你必须使用与导入模块相同的模式，所以如果它是全局的，你不必将node_modules 文件夹的路径放入其中.

【讨论】：

非常感谢。我测试一下。