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

reactjs - 更新反应实例后开玩笑快照为空

我想在按钮 onPress 功能运行后注册组件的快照。

这是我的测试套件:

上面的测试套件创建了两个快照。第一个测试在默认条件下快照组件的结构,并且似乎正确注册。

第二个测试应该在提交运行后记录组件结构,显示错误消息,提醒用户无法提交带有空字段的表单。

不幸的是,这并没有按预期工作,因为 afterlogin.update()运行,login.toJSON()返回null

我显然做错了什么,但是什么?文档似乎表明它update做了我认为它做的事情。

0 投票
1 回答
680 浏览

reactjs - 使用 react-test-renderer 进行快照测试

我正在尝试为具有以下提供程序的 App 组件创建一个测试用例。

  • 商店提供者
  • 翻译提供者
  • redux-persist
  • 路由器

我正在尝试呈现特定状态的应用程序,以确保呈现相同的应用程序。测试用例通过,但我得到以下快照。

我的测试用例是这样的,

tree不为 null 并且具有渲染的组件。但我没有看到这是写在快照中的。

npm 包版本

笑话医生

0 投票
0 回答
1970 浏览

reactjs - Apollo GraphQL React - 使用 MockedProvider 测试突变

我正在关注 Apollo GraphQL 提供的文档,用于使用 MockedProvider 测试 React 组件突变。

在我正在使用的应用程序中,recompose styled-components react apollo-client react-apollo 我使用jestenzyme

我使用 MockedProvider 创建了模拟查询并成功测试了我的组件。但是,我无法让突变测试正常工作。我的组件一直显示 HTML 的错误状态,而不是显示 OK 状态。

注意:通过 compose,我<TestKey/>将组件与处理函数以及将有条件地呈现的加载和错误状态组合在一起。

按照文档(上面链接),我创建了一个类似于此的测试:

零件

突变

突变的预期回报

测试

CONSOLE.LOG 在终端中返回以下 内容(它显示当我的组件从 GraphQL 收到错误时呈现的内容)

我已经尝试过使用 Enzyme 的 mount 而不是 React 的 Test 渲染器,我得到了相同的结果(错误状态)。

0 投票
1 回答
400 浏览

reactjs - Karma test in React app , failing with "TypeError: (0 , _expect2.default)(...).toExist is not a function"

I am new to React, and facing this failing test issue in my app (FilterItems component). Would greatly apprecitate any guidance or help.

Here's my simple FilterItems component.

And here's the test I am running on it, which fails - with the error " TypeError: (0 , _expect2.default)(...).toExist is not a function at Context. (src/tests/FilterItems.test.js:57453:40)"

My FilterItems.test.js file below

Just in case it helps, below is the karma.conf.js file

0 投票
1 回答
808 浏览

reactjs - React-Test-Render 调用组件方法

我有以下组件:

};

我想调用handleChange方法用户 react-test-renderer 可以吗?

0 投票
2 回答
36844 浏览

javascript - Jestjs如何测试在另一个函数中调用的函数

对于测试,我使用 jest 和 react-test-renderer。它应该很容易测试,但是我很难找到合适的例子。我曾尝试做类似的事情(通常我将函数保存在单独的文件中):

实用程序.js

utils.test.js

片段const childFunction = jest.fn(); 绝对行不通。在调用时,parentFunction 的主体只关心它自己的作用域。但是,如果我导入 childFunction 并执行jest.mock(childFunction) ,它也不起作用,因为 jest.mock 需要一个字符串、一个模块的 url,而不是函数本身。

上面的示例不起作用,我正在寻找替代方法。但是,这在使用 ShallowRenderer 渲染组件后有效。而且我想通过嵌套在另一个函数中的函数来实现类似的行为。

0 投票
1 回答
1940 浏览

reactjs - 如何使用测试渲染器或酶在 React 中测试转发的 ref?

我在我的应用程序中使用了一些动画,所有动画都依赖于 refs(我使用的是 GSAP)。大多数被测试的元素都位于其他 React 组件中;所以,我已经forwardRef在我的组件中设置了将 ref 传递给所需的元素。

现在,我想使用 Jest 和 Enzyme 或 React Test Renderer 测试这些 refs,但我无法使用这两个库来实现它。这是我当前的实现:

使用ReactTestRenderer.createorenzyme.render进行完整渲染不起作用,因为 refs 是空的。然后,我找到enzyme.mount了类似于ReactDOM.render;的函数。所以,决定使用它:

此测试未通过,因为由于某种原因,div返回 HTMLElement 时ref.current返回名为 WrapperComponent 的东西,而不是返回转发的元素。

创建元素并使用 ReactDOM 渲染和测试 ref 工作正常,但我想知道是否有办法为此目的使用酶或反应测试渲染器(我不喜欢使用多个库进行渲染以测试不同的功能)。

我想测试 refs 的主要原因是,如果一个 ref 更改为组件中的另一个元素,所有使用该组件的 ref 的动画都会中断。所以,我想指定使用 refs 时访问哪些元素。

0 投票
1 回答
28 浏览

reactjs - `simulate` - 测试失败,无法找出问题

我使用 进行了简单的测试jest,一切正常,只需要一个问题。我收到一个错误

expect(wrapper.find("textarea").prop("value")).toEqual("new comment");

fails.无法弄清楚这个问题。有人帮我吗?

这是我的测试代码:

现场演示

0 投票
4 回答
13418 浏览

javascript - 如何使用 Jest 和新的 React lazy 16.6 API 测试快照

lazy我必须使用新的 React API (16.6)导入组件。

在我的测试中,我正在制作这个组件的快照。这是一个非常简单的测试:

在日志中,测试失败并出现以下错误:

我必须用 包装每个测试套件<Suspense>...吗?

如果我这样做,我只会在快照中看到fallback组件。

那么,最好的方法是什么?

0 投票
1 回答
1247 浏览

reactjs - Sinon:测试 React 组件方法正在调用函数传递作为道具(Mocha + Chai + Sinon 用于单元测试)

我有一个反应组件,它有一个方法

我想检查是否正在调用 triggerClick(event) 方法。因此,我正在粘贴与此相关的代码。虽然如果您在 hitComponent 的日志中看到如下内容,

onChange: [功能:绑定triggerClick]

间谍日志说它没有被调用。不知道我哪里出错了。

o / p:命中组件:

o / p:间谍:

有一个辅助类可以使用 react-test-renderer