问题标签 [enzyme]

问题

我刚刚开始使用酶和反应测试。我试图让酶在一个微不足道的反应组件上与业力和 webpack 一起工作。我的问题是prop()包装器返回 null 我不知道为什么。

Greeter.js

Greeter.spec.js

结果

使用浅渲染 × 渲染默认 Greeter Chrome 50.0.2661 (Windows 10 0.0.0) 的简单测试 AssertionError: expected undefined to equal 'joe' at Assertion.assertEqual >>(F:/web/forms/node_modules/chai/chai.js :776:12) 在 Assertion.ctx.(anonymous function) [as equal] (F:web/forms/node_modules/chai/chai.js:4192:25) 在 Context。(F:web/forms/spec/components/greeter.spec.js:9:2932 <- webpack:///spec/components/greeter.spec.js:18:52)

堆

• 反应 0.14.8
• 业力
• 网页包
• 酶2.2.0

我正在尝试测试如果浏览器没有 Flash 插件将不会显示的组件的一部分。该组件借助swfObject和下面提到的逻辑来检测 flash 插件。

MyComponent.js

MyComponent-test.js

问题是 this.state.isMobile 在 karma 启动 chrome 并检测到 flash 插件时设置为 false。您可以想象，如果需要手动禁用 Chrome 的 flash 插件，该测试也无法工作。

我正在尝试安装一个组件来测试酶，并得到这个错误。

I have a "utility" called "reduxify" that automatically does a lot of the Redux/React boilerplate for you, so that instead of writing "mapStateToProps" and "mapDispatchToProps" functions on every component, you just write your component like this:

The reduxify function (with comments) are at this gist: https://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57

Without the comments (for brevity), it's produced below:

So, here's the question: What's the best way to mock a component (one that will have access to the Provider) so that I can unit test this sucker, put it out there for people to use and enjoy, and not feel like a hack?

我有一个父组件和一个子组件，它只是一个“标签”元素。当我单击子元素时，我需要调用父组件中的函数。我希望它被调用，但状态没有改变，当我看到覆盖文件时，函数没有被调用。

**更新：**代码适用于开发。只是单元测试失败了。

这是我的父组件

父.js

子组件

单元测试

反应组件：

测试：

第一个测试通过，第二个（四倍值）失败。我无法弄清楚我在这里做错了什么。

编辑：

如果我修改组件只返回这个：

并且测试如下：

然后就过去了。所以当我引入计算道具时，测试失败了。我不太确定为什么。

我正在尝试使用 Enzyme 模拟按钮单击。如果元素呈现，我已经能够编写简单的测试，但是按钮点击等有趣的测试却不尽如人意。

在此示例中，终端中的错误是：

单元测试是：

组件是：

任何建议表示赞赏。我很想做一些惊人的单元测试！

我对<input>使用mount. 这是我的测试：

控制台打印出来undefined。但是如果我稍微修改一下代码，它就可以工作：

当然，除了input.simulate我现在使用的线路失败render了。我需要两者都能正常工作。我该如何解决？

编辑：

我应该提一下，<EditableText />它不是一个受控组件。但是当我传入时defaultValue，<input />它似乎设置了值。上面的第二个代码块确实打印出值，同样，如果我在 Chrome 中检查输入元素并$0.value在控制台中输入，它会显示预期值。

我在使用 Enzyme 和 Mocha 测试我的 React 项目时遇到了很多麻烦。我有一个这样的测试：

当ChipInput被导入时，该文件会导入具有绝对路径的内容，例如/lib/collections/tags，然后 Mocha 出错，因为它显然只执行相对路径。我如何让这个工作？

编辑：

实际错误：

发生这种情况是因为从/tests/ChipInput-test.js导入ChipInput组件/client/components/Chips/index.js，该组件具有以下几行：

我正在尝试使用酶来测试我的 React Native 项目，并按照设置说明进行操作。

https://github.com/airbnb/enzyme/blob/master/docs/guides/react-native.md

这工作正常，我自己的代码被正确转译，但是当我包含一个不转译其代码的模块时（例如https://github.com/aksonov/react-native-router-flux），我的测试拒绝运行因为它在这些模块中的导入语句中出错。

我怎样才能让 babel 转译这些模块，或者还有其他方法可以让我的测试运行吗？

更新

似乎非转译的 3rd 方模块在 React Native 中相当普遍，因为 React Native 本身没有转译。

该解决方案似乎是强制转译和使用 react-native-mock 的组合。 https://github.com/facebook/react-native/issues/5392

但是，由于 NavigationExperimental 没有被嘲笑，我对 react-native-router-flux 有进一步的问题。

相关链接是：

https://github.com/lelandrichardson/react-native-mock/issues/23 https://github.com/lelandrichardson/react-native-mock/issues/22 https://github.com/lelandrichardson/react-本机模拟/拉/ 34

如果我找到解决方案，我会在这里更新。

更新 2

我在下面包含了我当前的解决方法，以防有人发现它有用。

https://stackoverflow.com/a/37655424/168012