问题标签 [reactjs-testutils]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
5 回答
10989 浏览

unit-testing - 使用 Material UI Dialog 对 React 组件进行单元测试

我目前正在为我的 React + MaterialUi 应用程序编写单元测试。

在我的应用程序中,我有一个对话框。我想确定取决于对话框上按下的按钮:

内部状态相应地改变。

不幸的是,我无法使用 TestUtils.scryRenderedComponentsWithType(FlatButton)
or
scryRenderedComponentsWithTag("button")
等​​来获取对话内容。

关于如何测试该流程的任何想法?

更新 1

所以我可以通过调用TestUtils.scryRenderedComponentsWithType(Dialog)来获取Dialog实例。但我无法获得对话内容。DOM 明智的内容不会呈现在视图本身内。它呈现在文档级别(div)上的新创建节点中。所以我尝试了这个:

上例中的 cancelButton 是正确的 DOM 元素。Simulate.click 但是不会触发组件单击功能。

关于乔纳斯

0 投票
2 回答
3034 浏览

reactjs - 错误:不变违规:findAllInRenderedTree(...):实例必须是复合组件

在 JEST 中为 React 文件编写测试用例时,出现此错误。以下是我的示例代码:

search_basr_test.js

search_bar.jsx

有没有人能帮我解决这个问题??

0 投票
0 回答
369 浏览

reactjs - ReactJS TestUtils 垃圾回收

对于 ReactJS 的测试工具类:TestUtils,它们是如何处理垃圾回收的?没有方法可以取消分配或销毁预先在 renderIntoDocument 方法中创建的 React 模块

这是源链接 https://github.com/facebook/react/blob/87bcbff21896e6b362012a0bc82c35d42a6f955d/src/test/ReactTestUtils.js

为清楚起见 TestUtils.renderIntoDocument(); 将初始化数据,但我如何卸载此组件或完全删除此组件?

先感谢您。

0 投票
1 回答
393 浏览

reactjs - React 0.14.5 复合组件和儿童的公共方法

我正在尝试在 React 类上测试公共方法。正如您在第一个规范中看到的那样,这很容易,但是如果我需要提供上下文,则该组件需要包装在一个复合组件中,并且我看不到获取子公共方法的方法(第二个规范) .

关于如何使用该方法的任何想法?谢谢!

0 投票
1 回答
532 浏览

unit-testing - React/Jasmine/Karma/Phantom 单元测试:findDOMNode 和 renderIntoDocument 没有按预期工作

我正在尝试编写一个简单的单元测试,但似乎无法弄清楚。我想测试一个引导模式,以确保在我将某些对象属性传递给它时它显示正确的内容。这是我的模态代码的样子:

因此,对于测试,我想确保如果我传递包含 contentBody 字段的道具 modalBox,它只会返回模态体的 contentBody。这是我要测试的示例:

我也尝试过使用 TestUtils.createRenderer 进行浅层渲染并尝试这种方法,但没有运气。根据我在网上看到的例子和之前的 react <0.14 的测试经验,我觉得这个测试应该可以工作。我只是不知道我错过了什么或误解了什么。过去,我做了类似下面的事情,只是查看了 componentNode 对象来查找元素等,但是 componentNode 返回 null。

谢谢你的帮助!

0 投票
1 回答
17010 浏览

javascript - 用酶反应测试组件道具的变化

我正在修改此处找到的示例:

https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.md

您可以从测试结果中看到 className 属性在 prop 更改时正确更新。但是输入的值仍然错误地设置为“foo”。

关于如何断言在接收新道具的组件上的值已正确更改为输入上的值属性的任何想法?

0 投票
1 回答
3408 浏览

reactjs - 测试包含多个操作的 React 组件 onClick 事件

无法弄清楚如何测试具有多个操作的 onClick 函数。

而我目前的测试是这样的。

我得到的结果是这样的。

0 投票
2 回答
4117 浏览

javascript - 如何使用 Jest 0.8.x 在 react-router 2.0 中测试使用上下文的 React 组件

我过去在使用旧版本的 react-router 时遇到了这个问题,我使用以下方法解决了这个问题:stubRouterContext + 一种访问组件实例的 hacky 方式(使用参考:https ://github.com/reactjs/react-router/issues/ 1140#issuecomment-113174774

我认为这在未来会有所改善,但我在 react-router 2.0 上遇到了同样的问题(我并不是说这是 react-router 的问题,但由于它使用上下文,它会影响我的测试)。所以,我有一个使用上下文将新状态推送到 url 的组件,this.context.router.push(...)这是现在的方式 https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md #programmatic-导航

我在说jest.dontMock('react-router'),但我的测试将失败:

TypeError: Cannot read property 'push' of undefined

发生这种情况是因为返回的实例TestUtils.renderIntoDocument将具有:

context: Object { router: undefined }

现在,这里真正的问题是什么?是杰斯特吗?我很确定我不是唯一遇到此问题的人,并且由于stubRouterContext它不再出现在 react-router 的官方文档中,是否有任何广泛接受的解决方案?

我将如何使测试工作?这基本上具有正确的上下文,并且能够从TestUtils.renderIntoDocument.

我正在使用 react 0.14.7、jest-cli 0.8.2 和 react-router 2.0。

0 投票
1 回答
371 浏览

unit-testing - React Test Utils - 执行模拟点击时未调用 Spy -

我正在尝试模拟对反应组件中的 dom 元素的单击,并断言基于此调用了间谍。这是测试的相关部分(使用 karma、mocha、chai、sinon 但我很确定这与这里无关):

这是反应组件:

测试运行,但结果是失败的测试,并显示消息“预期为真为假”。我看不出代码有什么问题——没有错误,我的间谍正确传递。还有什么我需要做的吗?

0 投票
1 回答
283 浏览

javascript - 如何使用 ReactTestUtils 设置 HTML5 文件类型输入

我有一个类似于以下的 React 表单的 HTML5 文件类型输入

文件上传后this.onChange,访问选定的文件,验证它们并转换表单。

我试图弄清楚如何使用 ReactTestUtils.Simulate 测试此功能,但无法弄清楚如何设置应该发送到 event.currentTarget.files 中的 onChange 回调的文件。

任何人都可以帮助指导我如何有效地模拟/测试它吗?