问题标签 [enzyme]

我正在尝试设置 Enzyme（由 Airbnb 编写）以便在 React 中运行一些 UI 测试。但是，无论我有什么配置（我已经尝试了几个），我都会收到这个错误。我添加了一个.babelrc文件，其中包含以下内容：

但它仍然给我同样的错误。该.babelrc文件与该文件处于同一级别package.json。我在网上到处搜索，看看是什么原因造成的，但我不知所措。有任何想法吗？

我正在使用Enzyme for React 编写测试。

我的测试非常简单：

此代码基本上直接取自airbnb/enzyme docs，但返回错误：

我有点不清楚我在做什么与文档不同。非常感谢任何指导。

我正在使用带有酶+摩卡+柴的 jsdom 来测试 React 组件的行为。该组件有一个聚焦 DOM 节点的方法（使用通常的node.focus()），我想测试该节点在调用时是否真正聚焦。

要知道哪个节点被聚焦，我将document.activeElement与我期望聚焦的节点进行比较。

但是，升级到 jsdom 9.1+ 后，document.activeElement似乎总是这样HTMLBodyElement，即使在调用节点的focus()方法之后也是如此。

使用 jsdom 9.0，测试运行良好。

我读到 jsdom 9.1+包含与焦点事件相关的一些更改，但我无法理解 make 如何document.activeElement按预期运行。有什么帮助吗？

在发布这个问题之前，我尝试在 sqa stackexchange 中搜索，但我没有找到关于浅层和渲染的帖子，所以我希望有人能在这里帮助我。

我什么时候应该在测试反应组件时使用浅层和渲染？根据airbnb docs，我对两者的区别提出了一些看法：

1. 由于 shallow 将组件作为一个单元进行测试，因此它应该用于“父”组件。（例如表格、包装器等）

2. 渲染用于子组件。

我问这个问题的原因是我很难弄清楚我应该使用哪个（尽管文档说它们非常相似）

那么，我如何知道在特定场景中使用哪一个呢？

我的测试文件的代码是：

这是我在 functions.js 中的 React 类

它工作正常，但我想编写测试，当我运行它时，它输出以下错误：

irtza@irtza-Lenovo-G50-70:~/Desktop/Kamal Hasan/pedialink$ mocha ./js_test/*.js /home/irtza/Desktop/Kamal Hasan/pedialink/static/js/functions.js:39 , ^ SyntaxError：Exports.runInThisContext (vm.js:53:16) 处的意外令牌 < 在 Module._compile (module.js:511:25) 在 Object.Module._extensions..js (module.js:550:10) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js :415:12) 在 Function.Module._load (module.js:407:3) 在 Module.require (module.js:466:17) 在 require (internal/module.js:20:19) 在 Object. (/home/irtza/Desktop/Kamal Hasan/pedialink/js_test/test.js:3:19) 在 Module._compile (module.js:541:32) 在 Object.Module._extensions..js (module.js: 550:10) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js:415:12) 在 Function.Module._load (module.js:407:3) 在 Module.require (module. js:466:17) at require (internal/module.js:20:19) at /usr/local/lib/node_modules/mocha/lib/mocha.js:220:27 at Array.forEach (native) at Mocha。加载文件 (/usr/local/lib/node_modules/mocha/lib/mocha.js:217:14) 在 Mocha.run (/usr/local/lib/node_modules/mocha/lib/mocha.js:485:10) 在目的。(/usr/local/lib/node_modules/mocha/bin/_mocha:405:18) 在 Module._compile (module.js:541:32) 在 Object.Module._extensions..js (module.js:550:10 ) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js:415:12) 在 Function.Module._load (module.js:407:3) 在 Function.Module.runMain (module.js :575:10) 启动时 (node.js:159:18) 在 node.js:444:3

以下是我的反应组件：

所以，非常简单的 React 组件。我刚刚开始使用 Enzyme 和 Mocha 进行测试，并编写了以下代码。

当我执行它时，它会输出以下警告：

组件：WholeTab 警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

和以下错误：

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

非常感谢任何帮助。

我有以下情况，我想测试以下功能，但是，我似乎无法在调试语句或 Enzyme 的文档中找到如何实现这一点：

我将 App 包装在一个更高阶的函数中，如下所示：

我想首先测试 applyData 是否正确地将数据作为道具传递以及检查其他条件的能力等。简而言之，提供程序在上下文中设置数据，而 applyData 基本上将数据作为道具传递到包装的组件中。

我尝试过 mount、shallow 等……但是，我无法通过以下任何方式获得所需的信息：

当我mount(<myHighchartsComponent />)的 highcharts 没有呈现在它应该呈现的 div 中时。我得到的只是：

该组件在浏览器中完美呈现。

更多细节：

有任何想法吗？

现在测试 React Native 组件的首选方法似乎是结合使用 mocha、react-native-mock 和酶来浅渲染组件。

问题在于，浅层渲染只深入一层，有时组件具有嵌套视图，需要您测试额外的一两层。

理论上，酶支持mount()完全渲染组件，但实际上这会失败，因为react-native-mock 的Viewmock 不会递归到 children中。

鉴于这些限制，人们如何在比一个渲染级别更深的地方测试他们的组件？

我们正在讨论 Enzyme浅层渲染和每次测试在每次测试中重新运行浅层的时间。无论是方法、点击次数、选择器长度等，我建议如果我们在测试运行之前对组件进行一次浅层渲染，而不是每次都进行一次浅渲染，我们的测试可能会运行得更快。

是否有任何专家可以指出哪种方式更快，以及任何一种方式是否存在任何陷阱？这些示例使用的是AVA运行器（为了讨论而略微做作）。

例如，这是一种方式（A）...

这是另一个（B）...

请注意，在测试 B 中，每个测试都有一个新的浅层包装器，而实际上除了 props 没有任何变化。

在 100 次测试过程中，您预计完成时间的差异是多少？

是否有机会在较高范围内进行一次浅渲染（测试 A）会污染测试状态？