问题标签 [react-testing]

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

reactjs - 如何测试从 React 组件中的另一个函数获取数据的异步函数?

我是 React 测试的新手。我想测试一个从 React 组件中的 API 获取 rick 和 Morty 数据的异步函数。

CharacterInfo.js

CharacterInfo.test.js

episodeFetch 函数:

我想测试CharaterInfo 组件中的 getEpisodes()函数。我该怎么做,我搜索了很多但找不到任何东西。

0 投票
1 回答
311 浏览

reactjs - 微前端反应应用的单元测试

我正在尝试为使用微前端架构的 react spa web 应用程序编写单元测试。我的第一步是为应用程序容器编写单元测试。

应用程序容器 react 组件使用一个 react-router 包含一个带有后续路由的开关来呈现主要内容区域中的组件。

每个应用程序都使用 JavaScript 运行时集成安装到应用程序容器。

我正在使用 React-Testing-Library 和 Jest 作为我的测试工具集的一部分。

我在互联网上到处搜索,没有找到任何关于我遇到的问题的有用文章。他们中的大多数都展示了一个测试与我的场景无关的 Web 应用程序的演示。

我有 3 个问题需要一些指导。

  1. 由于微前端由多层组件组成,这些组件与身份验证和其他业务逻辑链接在一起。我应该只测试“页面组件”吗?还是应该从 App 组件开始测试整个应用程序容器?如果两者都不是真的,我应该如何测试这个应用程序?

  2. 我尝试在页面组件级别进行测试以避免身份验证问题并且为了简单起见,但是该组件包含来自 React Router 库的组件,并且 Jest 抱怨我不应该使用<Link>未包含在组件中的<Router>组件。但是,<Router>在运行时执行时,组件存在于父组件级别。我怎样才能告诉 Jest “忽略”这个问题?

    我找不到允许我忽略此错误的配置。

  3. 由于问题 #2,我尝试通过渲染<App>组件来编写单元测试,但是该组件被传递到执行身份验证验证的高阶组件中。我怎样才能专注于测试最终结果而不是身份验证 HOC 的功能,以便我可以让组件呈现并让我的测试执行?

0 投票
0 回答
33 浏览

javascript - 如何为作为道具传递给组件的函数编写测试用例

我对反应测试库完全陌生。我试图涵盖一个功能的测试用例。

消息.jsx 文件

Message.spec.jsx

如何覆盖“updateReadUnread”功能的测试用例。以及如何覆盖内联逻辑运算符的测试用例,例如

提前致谢。

0 投票
0 回答
267 浏览

reactjs - React 测试库 - 组件未使用更新的数据呈现并导致测试用例中的超时错误

当我在浏览器上运行应用程序时,以下问题运行良好。但在我的测试用例中,它导致: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout

我的代码看起来类似于下面的代码片段-

我的组件.tsx

MyComponent.test.tsx

我已经通过控制台验证了新数据是从模拟 api 获取的,但它没有被渲染。因此我无法获得新按钮。请帮忙。

0 投票
0 回答
21 浏览

javascript - 如何为 Authenticated Api 调用编写 React 测试用例?

我正在尝试为我在 react 中的所有 API 调用编写测试用例,并且所有 API 都经过身份验证,我想为所有人编写测试用例,而且我在编写测试用例方面真的很新,所以如果有人帮助我解决这个问题,我将不胜感激怎么做

这是我调用 API 的函数。

我想为这个 API 调用编写测试用例,我尝试过这样,但在这里我尝试的并没有成功。

从“反应”导入反应;从 './Dashboard' 导入 { getDashboardLatest, getUser };

0 投票
1 回答
286 浏览

javascript - React Js API 调用 Jest 测试用例?

我正在尝试为我的 API 调用函数编写测试用例,但我不知道我无法成功运行测试的错误在哪里是 API 调用函数代码和测试用例代码。

测试用例代码。

从“反应”导入反应;从'../Service/Dashboard/Dashboard'导入{getUserTest};

这是我在尝试运行测试用例时遇到的错误。

0 投票
1 回答
295 浏览

reactjs - Antd Date Picker Jests with React-testing-library 没有设置输入值

我正在使用 antd (v4.x) 的范围日期选择器。

在我的测试文件中,我正在执行以下操作:

我在触发事件之间尝试了一些控制台日志,以查看输入是否实际上具有正确的值,但它始终为空。

我也尝试过:

userEvent.type(rtl.getByPlaceHolderText(...), myValue)

它似乎也不起作用。如果你们对这个问题有任何解决方案,我很乐意接受。

谢谢。

0 投票
0 回答
72 浏览

react-native - _reactNative.UIManager.setLayoutAnimationEnabledExperimental 不是函数

我正在尝试测试具有此函数调用的 react-native 组件。

使用 @testing-library/react-native 渲染此组件时出现此错误。

我尝试使用 jest spyOn 模拟该函数

仍然得到同样的错误,无论如何我可以模拟这个功能?

0 投票
0 回答
102 浏览

reactjs - Jest Mock 3rd 方 TS 模块 - 模拟时出现“找不到模块”错误

material-ui-nested-menu-item每次使用 jest 和 react-testing-library模拟模块时,我都会收到“找不到模块”错误。

使用的版本

  • 开玩笑:25.5.4
  • ts-开玩笑:25.5.1

代码类似于以下代码段-

应用程序.ts

应用程序.test.tsx

错误 -

0 投票
0 回答
74 浏览

reactjs - React 测试库 - 外部 Web 组件回调函数不起作用

我目前在我的反应应用程序上使用外部 Web 组件库。该库具有自定义按钮和其他组件。

Button 组件有自己的自定义回调函数,我在我的代码中使用它。

在我使用时编写测试用例时fireEvent.click(),回调不起作用。

谁能告诉我如何让回调工作。