问题标签 [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 投票
1 回答
167 浏览

javascript - 如何获得模拟反应事件以更新组件中 ref 的值?

所以我有一个看起来像这样的反应组件:

然后我想测试它如下:

但是,方法上的引用字段的值onFormSubmit不是Simulate.change调用设置的值。

为什么不?这是预期的行为吗?

0 投票
4 回答
11056 浏览

ajax - 使用 JEST 进行 ajax 调用的单元测试反应组件

我有一个在componentDidMount方法中进行 AJAX 调用的反应组件。当我尝试使用 渲染它React.addons.TestUtils时,组件在没有进行 AJAX 调用的情况下被渲染。我将如何使用 jest 测试反应组件以便它进行 AJAX 调用?我是否还需要使用 phantomJS(或类似 env 的浏览器)来提供 DOM 功能来响应组件?

反应组件:

测试用例:

0 投票
2 回答
10683 浏览

reactjs - React TestUtils,如何模拟文档mouseMove?

我想TestUtils.Simulate.mouseMovedocument. 我有Dragger一个mouseMovedocument. 这是一个不完整的版本:

我正在使用jasmine,我想确保handleDrag在 a 之后调用我的回调,mouseDown然后是 a mouseMove

但是该mouseMove事件没有被正确模拟。我看到 2 个问题

  1. 我可能需要将事件数据传递给TestUtils.Simulate.mouseMove. 例如,在TestUtils.Simulate.mouseDown(dragger.getDOMNode())其更改为TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0}). 我应该传递什么事件数据TestUtils.Simulate.mouseMove
  2. document不是将测试组件渲染到的分离 DOM的一部分。这可能是Simulate.mouseMove不起作用的另一个原因。我可以在测试中使用什么来代替document

我该如何使用TestUtils.Simulate.mouseMove

0 投票
1 回答
6348 浏览

reactjs - React 13.3 unmountComponentAtNode() 错误:目标容器不是 DOM 元素

当我从 React 12.2 升级到 React 13.3 时,我的测试套件中出现以下错误:

错误:不变违规:unmountComponentAtNode(...):目标容器不是 DOM 元素。

我正在使用这篇博客文章来使用 Jasmine 测试我的代码。此代码中出现错误:

我知道这getDOMNode()已被弃用,但这不是导致错误的原因。

当我检查instance.getDOMNode()它时,它返回给定的实例,但是当它出错时,它instance.getDOMNode().parent是未定义的。调用React.unmountComponentAtNode这个未定义的变量会导致错误。

像这样的答案表明存在某种竞争条件,但我不确定这将如何应用于我的测试套件。谢谢你的帮助!

0 投票
0 回答
430 浏览

javascript - 点击模拟后React测试调用函数失败

我正在从某人那里接手一个项目,它是用 React 构建的。其中一个测试失败,因为在模拟单击按钮后未调用函数。当我在浏览器中使用该应用程序时,该功能被调用,所以不确定发生了什么。我对 React 还很陌生,之前没有写过任何测试,所以我可能忽略了一些非常明显的东西。

这是相关的handleSave函数:

我在控制台中遇到的错误是:

有任何想法吗?我不确定从哪里开始...我在控制台中记录了一些东西,它看起来不错(即有一个按钮等)

0 投票
2 回答
1482 浏览

jasmine - 在 TestUtils 中使用 CSS 选择器查找组件

我正在使用TestUtils为我的 React 组件编写一些简单的测试,我发现TestUtils.FindRenderedDOMComponentWithClassTestUtils.FindRenderedDOMComponentWithTag方法都非常有限。我想使用典型的 CSS 选择器(即tag.class [attr])找到一个组件,但似乎这不是一个选项。

有没有一种简单的方法来查找具有特定属性的元素?如果没有,是否有任何有用的工具可以找到除了 之外的组件TestUtils

0 投票
1 回答
2640 浏览

javascript - 使用 React.addons.TestUtils reactjs 测试组件

我正在阅读reactjs文档,但我很难完全理解它。我希望有更多循序渐进的例子。

我希望能够测试我的组件及其子组件,但我不确定如何创建组件的模拟或实例来测试它们。

代码:

我收到错误消息,但我不确定这意味着什么:

0 投票
1 回答
1777 浏览

javascript - 使用 react testutils 模拟拖放不起作用

我正在尝试使用 jasmine、karma 和 React TestUtils 测试我的 ReactJS mixin 的拖放功能。

没有抛出异常,但是在调试时似乎绑定到事件侦听器的函数在模拟事件时没有被执行。

你可以在这里克隆它: https ://github.com/itsh01/react-dragdrop/tree/testing-simutale-events

非常感谢您提前。

这是我的测试:

这是混合:

再次感谢。

0 投票
1 回答
4729 浏览

javascript - 使用 scryRenderedComponentsWithType 或 findRenderedComponentWithType

我正在尝试通过使用findRenderedComponentWithTypefindRenderedComponentWithType查找组件来进行一些单元测试。但是,我遇到了一些麻烦。

我有一个浅渲染组件<Layout />,我想在其中找到<UserMenu />.

在我的测试文件中,我尝试了这个:

但是,scryRenderedComponentsWithType找不到findRenderedComponentWithType任何类型为 的组件UserMenu

我还尝试在组件所在exports的位置创建另一个文件,UserMenu但我得到相同的输出或找到 0(数组长度 0)或在未找到组件时出错(Error: Did not find exactly one match for componentType:function UserMenu())。

0 投票
1 回答
2313 浏览

unit-testing - 如何使用 React findDomNode 函数访问内联样式?

我目前正在开玩笑测试 React 组件,组件的内联样式会根据不同的 props 值进行更改。

这是我想做的一个例子:

这是组件道具:

这是要测试的组件 dom:

如果我能得到 boxStyle 里面的内容,我可以从中断言测试结果。

非常感谢!