如何在next.js应用程序中使用Jest end酶编写单元测试redux连接组件
在Next.js应用程序中使用Jest和Enzyme编写单元测试Redux连接组件的步骤如下：
- 首先，确保你的Next.js应用程序已经安装了Jest和Enzyme。你可以使用以下命令进行安装：
- 首先，确保你的Next.js应用程序已经安装了Jest和Enzyme。你可以使用以下命令进行安装：
- 创建一个
__tests__文件夹在你的组件目录下，并在该文件夹中创建一个以.test.js为后缀的测试文件。例如，如果你的组件文件是MyComponent.js，那么你的测试文件应该是MyComponent.test.js。 - 在测试文件的顶部，导入必要的依赖项：
- 在测试文件的顶部，导入必要的依赖项：
- 创建一个模拟的Redux store。你可以使用
redux-mock-store库来创建一个模拟的store。例如： - 创建一个模拟的Redux store。你可以使用
redux-mock-store库来创建一个模拟的store。例如： - 编写测试用例。使用
shallow方法来浅渲染你的组件，并将模拟的store作为Provider组件的prop传递给组件。然后，使用Enzyme的API来查找和断言你的组件的行为和输出。例如： - 编写测试用例。使用
shallow方法来浅渲染你的组件，并将模拟的store作为Provider组件的prop传递给组件。然后，使用Enzyme的API来查找和断言你的组件的行为和输出。例如： - 运行测试。在你的项目根目录下运行以下命令来执行测试：
- 运行测试。在你的项目根目录下运行以下命令来执行测试：
- Jest将会运行你的测试用例，并输出测试结果。
这样，你就可以在Next.js应用程序中使用Jest和Enzyme编写单元测试Redux连接组件了。记得根据你的实际情况修改代码和断言来适应你的应用程序。
相关·内容
我正在更新一个单元测试，在jest和酶上的一个反应组件，并遇到一个问题。
我最近添加了一个子组件(它本身连接到Redux)到父组件中，它使用的是酶的‘挂载’，单元测试失败了。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Con
浏览 2提问于2019-09-23得票数 2
在React Single Page App中，我们需要将createStore的逻辑分离到另一个组件(通常称为<Root />)，以便在测试文件中重用它，以便让connect函数与存储链接import { Provider } from "react-redux";
import { createStore } from "redux为了mount或shallow
浏览 15提问于2019-07-17得票数 3
1回答
在我的react组件中，我使用redux和 export default connect(selector, null)(scriptLoader([https://someurl.com])(JusPayCard)); 我正在用jest和酶写单元测试。然而，我的jusPayCard.state()除了脚本加载器在使用酶编写测试时发送的2props之外，不会返回任何其他内容。当我从组件</
浏览 9提问于2020-09-10得票数 1
1回答
我正在用jest和酶对我的React应用程序进行单元测试，一切都很好，直到我碰巧测试了一个与Redux连接的类组件。我继续测试它，用a包装组件，然后浅层挂载它。但是，我无法模拟连接组件中定义的静态方法的返回值。，它没有任何效果，它失败了：有趣的是，如果我
浏览 8提问于2020-02-17得票数 0
我曾经以这种方式测试连接到redux的组件：import { createStore } from 'redux';
import rootReducer from '..道具中的redux存储已被删除，什么也不做。若要为特定组件使用自定义Redux存储，请使用React.createContext()创建自定义React上下文，并传递context对象以进行Re
浏览 0提问于2019-01-07得票数 19
回答已采纳
1回答
我正在用jest和酶对我的React应用程序进行单元测试，一切都很好，直到我碰巧测试了一个与Redux连接的类组件。我继续测试它，用a包装组件，然后浅层挂载它。然而，我不能在更新组件的道具后运行断言，也不能监视被调用的类方法。它失败了： showHeader: trueexpect(wrapper.find('h1')).toHaveLength(1);
有趣的是
浏览 16提问于2020-02-17得票数 0
1回答
在这种情况下，我需要对一个有状态组件进行单元测试，该组件也连接到redux存储，用于调度事件。我用的是Jest和酶。我尝试了文档中提供的各种示例：考虑伪代码中的下列react组件：我无法检索实际的成分时，使用
浏览 0提问于2018-12-17得票数 0
当我使用Jest酶运行我非常基本的测试时，我遇到了上述错误：
expect(shallow(<CustomerListTable customers={mockCustomers} />).length
浏览 4提问于2021-11-19得票数 5
回答已采纳
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
enzyme断言库还是任务运行程序？测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
2回答
我们用酶和Jest进行测试。在我们的代码库中更新到redux的最新版本，所有连接的组件测试用例都开始失败(版本6)。使用创建存储const wrapper = shallow(<SomeConnectedComponent不变违反:无法在“连接(SomeConn
浏览 0提问于2019-12-05得票数 6
回答已采纳
4回答
Jest +酶:试验剩余形式
、、、、
我的应用程序有很多redux表单。我使用Jest和酶进行单元测试。但是，我没有测试redux表单。我的组件是一个登录表单，类似于：模拟存储，导入连接组件<
浏览 0提问于2018-04-05得票数 8
我正在制作一个javascript单元测试套件，用于一个带有jest &酶法的react redux组件；所讨论的组件是一个文件上传表单，其中包含一些基于用户输入和/或服务器响应的基本样式更改。玩笑和酶都是建立和工作的，我能够成功地编写基本的测试，好的。我想用jest &酶法模拟用户与这些UI元素(文件输入和文本字段)的交互，但我在这样做时遇到了困难；我对使用这些测试框架相
浏览 3提问于2019-04-11得票数 0
我在组件中实现了一个焦点监听器，如下所示(如react导航v5文档所示)： const { navigation } = this.props // do something}
我很难找到一种使用Jest/酶编写<em
浏览 1提问于2022-01-06得票数 1
我试图升级以响应16+，而我现有的单元测试失败了。应用程序运行良好，只有单元测试失败。();// Here instance is null hence the rest will fail.instance为null，因为“连接”组件是功能性的或无状态的。注意:使用React 16和更高版本，instance()返回无状态功能
浏览 1提问于2020-01-16得票数 1
回答已采纳
我对单元测试很陌生，我刚刚开始为我的react项目编写单元测试。我的项目是使用创建-反应-应用程序创建的，我已经安装了所需的测试库，如酶、酶适配器-Reacti-16和jest-酶。我在src目录中创建了一个新文件setupTests.js，并添加了酶配置。
当我试图使用命令npm test运行单元测试时，我收到了下面的错误，因此我的测试失败了。
浏览 1提问于2020-09-17得票数 0
回答已采纳
我有很多调用dispatch() (Redux)的功能React组件。dispatch()函数本身是由react-redux的useDispatch()钩子传入的。Jest和酶，我需要做什么才能断言expect(dispatch).toHaveBeenCalledWith(authActions.logout)
我没有模拟存储或使用redux-mock-store相反，我将组件包装在我为测试而制作的Root组件中。c
浏览 3提问于2020-06-25得票数 4
回答已采纳
我们目前正在用酶的浅渲染功能测试我们的反应应用程序。每个组件都是隔离测试的，所以我理解为什么这被称为“单元测试”。这种测试的名称是什么？我听说过它叫做“集成测试”，但是当我在工作中这么说的时候，人们认为我的意思
浏览 0提问于2019-07-18得票数 2
回答已采纳
我正在编写以下容器组件的Jest和酶制剂单元测试：import React from 'react' )} /> }我正在为Tab编写测试，但问题是我很难用酶遍历DOM来获取它。在普通组件中
浏览 2提问于2017-12-26得票数 1
回答已采纳
1回答
我对Jest和单元测试也很陌生，我想知道使用jest可以涵盖什么样的场景。
酶到底是用来做什么的？这是Jest必须使用
浏览 6提问于2017-08-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
