问题标签 [react-test-renderer]

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 回答
77 浏览

reactjs - 反应测试:更新输入后道具值仍然没有改变

我有这个代码在测试中

问题是在这个动作之后我formatField.props().value仍然得到它undefined

我错过了什么吗?

我试过了

并且

该值仍未更新

非常感谢!

0 投票
1 回答
5832 浏览

reactjs - 使用 react-testing-library 测试卸载

我对查询元素何时/如何更新感到困惑。例如:

我有一个计数的按钮。当它数到 3 时,它就消失了。

我正在像这样测试它:

测试失败并出现以下错误:

为什么按钮元素知道它的文本内容发生了变化?我们不需要在每次点击后queryByText("1")运行。queryByText("2")

为什么它不知道最后一次单击后按钮已被卸载?queryByText("3")如果我们想检查它是否确实为空,我们确实需要这样做。

这是代码沙箱: https ://codesandbox.io/s/react-testing-library-demo-76zhi

0 投票
1 回答
968 浏览

javascript - React / Unit Test (Jest) click 方法与 preventDefault

所以我遇到了一个小问题,我被难住了......

如果满足特定条件,我有一个Link组件将通过道具进入特定路线。to如果不满足该条件,则单击该链接将执行其他操作(在我的情况下启动自定义模式)。

我有一个绑定到onClickLink组件上的处理程序的类方法

我的问题是单元测试。我有一个单元测试,用于在何时单击condition链接false

我迷路的地方是测试另一方 - 什么时候conditiontrue之后我不需要调用preventDefault或执行任何逻辑。我不需要任何东西handleClick来开火。唯一的逻辑handleClick是何时condition为假。

单击组件时去路由的逻辑Link很好,它只是 when conditionis的单元测试true

我需要测试preventDefault没有被调用的,那instance.state.showModaltrue,但我很难过。这是我一直认为它必须的,但无法超越它......

如果有人有一些指导,将不胜感激!谢谢!

0 投票
1 回答
568 浏览

javascript - 如何使用快照在 useEffect 中使用异步回调测试功能组件

我正在尝试在我的组件上编写单元测试,它看起来像这样。

rows问题是组件通过 async 函数获取数据,所以在组件检查是否为空并返回 null后会调用它。

我嘲笑getData所以它应该返回一些值。但是,我仍然不明白我应该如何用单元测试来覆盖这个组件。我想它应该是一个快照,也许它是不对的。

我的测试:

0 投票
2 回答
348 浏览

javascript - 在反应应用程序中使用反应测试渲染器和故事书执行组件测试时出错

我在做故事书教程,但是在我创建和运行测试时的教程部分中,这会引发异常,指示文件.storybook/config.js中出现以下错误:

日志错误

我的组件任务

任务.js

这是我的组件任务中的故事

任务故事.js

故事书.test.js

故事书配置文件

.storybook/config.js

.storybook/addons.js

为什么它表明 require.context 不是函数?这个错误发生了什么,你能解释一下吗?

0 投票
0 回答
20 浏览

javascript - `this` 未设置为猴子修补原型方法中的当前对象

我正在尝试修补创建的对象react-test-renderer以添加 .findById(testID) 方法,但在对象内部我无法访问对象上的其他方法。这是我的测试文件中的相关代码。

而不是有findAll方法,this它似乎是全局对象。为什么是这样?我想如果我在一个对象上调用一个方法,this当我使用一个老式function函数时,该方法将被设置为该对象。

0 投票
1 回答
905 浏览

mocking - React-bootstrap Typeahead 不适用于 Jest 快照

我有一个来自 API 文档的非常简单的AsyncTypeahead示例:

现在,如果我想为这个组件创建一个 Jest 快照测试,那么我会写这样的东西:

这不起作用。我收到此错误:

TypeError:无法读取 null 的属性“样式”

这是 bootstrap typeahead 的已知问题吗?

0 投票
0 回答
919 浏览

react-test-renderer - 模拟 ref 时无法读取未定义的属性“_ownerDocument”

我正在使用react-test-renderer 中的createMockNode 并模拟了样式以防止未定义的错误。

这防止了样式上的“未定义”错误,但现在我收到了这个错误:

(顺便说一句,我正在我的组件中测试react-bootstrap-typeahead。)

我是否正确地为输入创建了模拟对象?

0 投票
1 回答
558 浏览

javascript - 拆除测试时使用 unmountComponentAtNode 或 document.body.removeChild?

从这个文档:https ://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks

文档提供了一种设置和拆除测试的方法,如下所示:

从这个文档:https ://reactjs.org/docs/testing-recipes.html#setup--teardown

设置和拆卸方式如下:

我有点困惑哪一个是拆解测试的最佳方法?

unmountComponentAtNode+dom.remove()document.body.removeChild?

更新

这两个官方文档在拆机测试时给出了这两种方式,是否意味着它们都可以?它们是等价的吗?或者是什么?

0 投票
2 回答
5033 浏览

reactjs - react-test-renderer 的 create() 与 @testing-library/react 的 render()

我是 React 新手,对所有测试库感到困惑。我让我的测试代码可以工作,但似乎是多余的,必须create()从 react-test-renderer 调用才能使用它toMatchSnapshot(),并且必须render()从 @testing-library/react 调用才能使用它的断言,例如getByLabelText().

作为一个新手,我很难理解所有这些 React 库之间的区别。但我认为必须有一个更简单的方法。

我怎样才能简化我的测试代码,所以我只需要调用一个渲染组件的东西,以便我可以进行快照测试和更具体的断言?