javascript - React Jest 匹配快照,使用子组件测试组件时崩溃

标签 javascript unit-testing reactjs jestjs

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

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

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

类型错误:无法读取未定义的属性“DEFINE_MANY”

我把它放在我的 package.json 上,但什么也没发生:

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

有什么想法吗?

在 React 中对组件进行单元测试的正确方法是吗?

最佳答案

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

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

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

第一个参数是全局 npm 模块的名称或本地组件的路径(请注意,该路径是相对于测试文件的路径)。第二个参数只是一个返回字符串的函数(我总是返回与 jsx 中使用的名称相同的名称)。这将导致转储组件不执行任何操作,但名称与原始组件相同。因此,在您的快照中,您将看不到任何差异,除了模拟组件不会渲染任何子组件之外。

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

jest.unmock('ChildComponet.js') was called but automocking is disabled...

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

TypeError: Cannot read property 'DEFINE_MANY' of undefined

当您启用自动模拟时,每个导入的模块都会被替换为未定义。关于 unmockedModulePathPatterns 设置,我不能说太多,但我相信您必须使用与导入模块相同的模式,因此如果它是全局的,则不必将路径放在 node_modules 文件夹。

关于javascript - React Jest 匹配快照,使用子组件测试组件时崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40044730/

相关文章:

javascript - 使用 PrimeNG 组件时出现问题(未找到指令注释)

php - 如何使用 Laravel 测试授权重定向?

reactjs - 如何使用按钮更改 react-bootstrap 中的选项卡?

reactjs - Redux 警告仅出现在测试中

javascript - 当我将父类传递给子类时重新渲染值

Javascript - 计算 es6 中具有许多字段的对象数组中的重复项

javascript - Vue 模板不更新

php - 更新数据库而不创建重复项

java - Android 测试框架说明

python - 我如何在 Python 中对随机洗牌操作进行单元测试?