使用jest和酶对useReducer钩子进行单元测试
是一种常见的测试方法。useReducer是React提供的一个钩子函数，用于管理组件的状态和状态变化。
在进行单元测试时，我们可以使用jest作为测试框架，结合酶（enzyme）作为React组件的测试工具，对useReducer钩子进行测试。具体步骤如下：
- 配置测试环境： 首先，安装jest和酶依赖库：
- 配置测试环境： 首先，安装jest和酶依赖库：
- 在项目中创建一个
setupTests.js文件，并将以下代码添加到文件中： - 在项目中创建一个
setupTests.js文件，并将以下代码添加到文件中： - 这样可以配置jest和酶的适配器，使其能够正确地运行和测试React组件。
- 创建测试用例： 在测试文件中，编写测试用例来测试useReducer钩子的行为和功能。例如，可以测试初始状态、状态变化和触发的操作。
- 创建测试用例： 在测试文件中，编写测试用例来测试useReducer钩子的行为和功能。例如，可以测试初始状态、状态变化和触发的操作。
- 在上述代码中，我们创建了一个Counter组件，使用useReducer钩子来管理计数器的状态。然后，我们编写了两个测试用例，分别测试了点击"+"按钮和"-"按钮时计数器的行为。
- 运行测试： 在命令行中执行以下命令，运行单元测试：
- 运行测试： 在命令行中执行以下命令，运行单元测试：
- jest会运行测试文件中的所有测试用例，并显示测试结果。
通过使用jest和酶对useReducer钩子进行单元测试，我们可以确保钩子的功能和行为符合预期，提高代码的可靠性和可维护性。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless应用托管平台）：https://cloud.tencent.com/product/scf
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
- 腾讯云安全计算服务（可信计算）：https://cloud.tencent.com/product/trusted-compute
相关·内容
我正在测试一个反应应用与Jest &酶。当我运行npm run test时，我在UserContext.jsx中得到了在MainPage.jsx中导入的错误。我怎么才能解决呢？
错误消息
不变违反:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
11 | };
12 |
> 13 | export const useUserValue = () => useContext(Us
浏览 0提问于2020-09-05得票数 1
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
我正在为我的react项目编写单元测试用例，并使用jest和酶来编写测试用例。我看过那些开玩笑的文件
这解释了jest.spyOn()方法，但我没有完全理解。
因此，我想知道更多关于我们应该使用jest.fn()和应该/必须在哪里使用jest.spyOn()的具体位置的详细信息。这将是一个很大的帮助，如果可以解释为两个方法的例子。
谢谢
浏览 2提问于2019-08-25得票数 84
1回答
如何测试没有呈现方法的本机类？
、、、、
我正在构建一个移动应用程序，并在尝试对代码进行单元测试时遇到了一个问题。目前，我确实在测试中同时使用了Jest和酶。
我如何能够在不包含呈现()方法和“扩展为组件”的特定类/文件中测试这些方法？此类用于从API中查询信息并将其保存到变量中。
关于Jest和酶的文献
似乎专注于测试呈现的组件。
浏览 1提问于2017-01-05得票数 0
回答已采纳
2回答
令我惊讶的是，许多博客都在编写单元测试，以便同时使用Jest和酵素进行反应应用程序。不能，我们用唯一的玩笑或唯一的酶来编写反应应用程序的单元测试？
如果是的话，为了得到一个成分，我们在酶中使用浅层()，而在Jest中使用什么？
浏览 5提问于2020-05-12得票数 0
回答已采纳
1回答
我对Jest和单元测试也很陌生，我想知道使用jest可以涵盖什么样的场景。
在我开始之前，我有一些具体的问题：
在单元测试中应该包括什么反应应用程序？
我是否需要其他有Jest的库来进行断言、嘲弄等等？我读过关于柴、西农等的文章。我不知道它们为什么会被使用，也不知道它们是否需要和Jest一起使用。
酶到底是用来做什么的？这是Jest必须使用的吗？
我需要像卡玛这样的小丑跑任务吗？或者Jest有一个内置的？我该怎么安排呢。
浏览 6提问于2017-08-09得票数 0
回答已采纳
我试着用Jest +酶测试useState和useEffect的反应钩子，但是我找不到方法，有人能帮忙吗？
const [sPlaceholder, setSPlaceholder] = useState('');
useEffect(() => {
setSPlaceholder('abcd');
if (s === '') {
dispatchUpdateSPlaceholder(searchPlaceholder);
}
}, [sPlaceholder]);
浏览 1提问于2019-05-09得票数 4
回答已采纳
我正在尝试使用Jest、useEffect的酶和React钩子的useCallback来编写单元测试用例，但我无法成功。你能帮我为下面的代码写一个测试用例吗？ ModalComponent.jsx const ModalComponent = ({ closeModal }) => {
const handleModal = useCallback((event) => {
if (event.keyCode === 27) {
closeModal(false);
}
}
useEffect(
浏览 47提问于2020-07-12得票数 2
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
我正在使用Jest和酶对这个非常简单的组件render()运行单元测试
render() {
return (<Input
id='foo'
ref={input => { this.refInput = input }}
/>)
}
it('should render Input', () => {
wrapper = shallow(<Component />)
expect(wrapper.find(Input)).toHaveLength(1)
})
我还使用了Jest的覆盖范围选项，
浏览 10提问于2018-01-04得票数 11
回答已采纳
4回答
最近，React 18发布了，我将我的项目升级到了18，我注意到所有由Jest和酵素编写的单元测试都失败了。我已经将从酶装入作为组件的包装器，并注意到以下错误：
TypeError: Cannot read property 'child' of undefined
我还试着检查它是否支持React 18，但没有找到任何合适的链接。
有人对此有任何想法吗？或者，在这种情况下，有什么解决办法可以遵循吗？
浏览 30提问于2022-04-27得票数 13
2回答
我是Preact的新手，我必须为Preact中的应用程序编写单元测试用例。我发现jest和酶可以用来做同样的事情，但是我每次都会遇到错误。有人能推荐一些关于如何在Preact上编写单元测试用例的博客或教程吗？
浏览 2提问于2017-10-24得票数 3
我是新手反应，我需要一个帮助为Redux表单组件"onSubmitSuccess“编写测试用例，以下是代码 reduxForm({ form: "AddTagForm",
enableReinitialize: true,
onSubmitSuccess: afterSubmit })
callback function,
export const afterSubmit = (dispatch) => dispatch(reset("AddTagForm")); 我需要一个帮助来编写afterSubmit方法的测试用例。请帮帮忙
浏览 26提问于2019-10-16得票数 0
我正在使用覆盖率报告生成器自动检查拉取请求检查等文件中的单元测试覆盖率行。 然而，使用Jest和酶，我无法涵盖影响覆盖率%的useEffect()代码，如下所示。如何覆盖useEffect钩子中的代码行？这在Jest/Enzyme中是可能的吗？ ?
浏览 27提问于2021-11-09得票数 1
尝试运行以下内容的单元测试:使用REACT JS - Jest和酶是代码的一部分：
componentDidMount () {
let requestSettings = this.props.getViewRequestSettings()
let linkerDefinition = requestSettings.catalog[0].resolvedtemplate[0]
if(linkerDefinition.includes('Universal')){
let functionName =
linkerDefinition.substr(0,li
浏览 3提问于2019-02-07得票数 9
回答已采纳
我有一个名为useInitialSetup的自定义钩子，它返回键值字典对象。它是在App.tsx中消耗的。
在App.test.tsx中，我有一套使用Jest和编写的单元测试。
是否可以仅在所选的单元测试中模拟useInitialSetup ，而不是全部？
下面是我在App.test.tsx中尝试过的：
jest.mock('../../hooks/useInitialSetup', () => {
return jest.fn(() => ({
loading: mockLoading,
suspendedTrial: mockSuspende
浏览 3提问于2021-04-22得票数 0
回答已采纳
1回答
我们可以使用酶、jest为样式编写单元测试吗？例如，可见性项目
display: none;
wrapper.get(0).style - do not work for me
浏览 0提问于2017-11-08得票数 0
我有很多调用dispatch() (Redux)的功能React组件。dispatch()函数本身是由react-redux的useDispatch()钩子传入的。
作为一个简化的例子：
const LogoutButton: FC = () => {
const dispatch: Dispatch = useDispatch();
return (
<button onClick={() => {
console.log("Clicked...") // To check that onClick() simulation i
浏览 3提问于2020-06-25得票数 4
回答已采纳
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
1回答
我有一个React应用程序，我用jest和酶添加了测试。我对一个名为<Duration.jsx />的react组件进行了单元测试。覆盖率显示了<Duration.jsx />和files.scss中的所有组件覆盖率。正常吗？
浏览 14提问于2018-12-19得票数 1
回答已采纳
我很难在Jest中重新渲染一个酶包的成分。我花了一段时间才把问题缩小，但这似乎是useState和酶的问题。
我有一个有按钮的组件。单击该按钮将调用一个setState()函数来更新组件状态并重新呈现。例如：
// ...
<Drawer
classes={{ paper: classes.drawer }}
anchor="right"
open={showInfoDrawer}
variant={mobile() ? 'temporary' : 'persistent'}
onClose={() => {
浏览 3提问于2020-06-25得票数 3
是否有义务用Jest和酶来模拟useState钩子？因为对于一个简单的组件来说，这是很复杂的。
酶的simulate函数在这种情况下有效吗？
浏览 4提问于2022-01-02得票数 1
回答已采纳
我对单元测试很陌生，我刚刚开始为我的react项目编写单元测试。我的项目是使用创建-反应-应用程序创建的，我已经安装了所需的测试库，如酶、酶适配器-Reacti-16和jest-酶。
我在src目录中创建了一个新文件setupTests.js，并添加了酶配置。
当我试图使用命令npm test运行单元测试时，我收到了下面的错误，因此我的测试失败了。
src/App.test.js
● Test suite failed to run
Cannot find module '@babel/polyfill/lib/noConflict' from 'index.js&#
浏览 1提问于2020-09-17得票数 0
回答已采纳
1回答
我们可以使用酶、jest为样式编写单元测试吗？
wrapper.prop('style')
对我来说是未定义的；我们可以检查一些css属性吗？如:显示或颜色等。
浏览 0提问于2017-11-09得票数 0
2回答
我正在使用React中的功能组件，我需要为功能组件中的方法编写单元测试用例。
import React from 'react';
function print(){
console.log('hello');
}
function Welcome(props){
return <h1>{props.name}</h1>;
}
export default Welcome;
在jest和酶中：
test (method print , ()=> {
const container = shallo
浏览 19提问于2020-06-02得票数 0
3回答
我在用玩笑和酶做单元测试。我有与钩子连接的组件。我调用redux操作来加载数据。
import React, {useEffect, useState, useCallBack} from "react";
import {connect} from "react-redux";
import CustomComponent from "../Folder";
import { loadData, createData, updateData } from "../../redux/actions";
const Accoun
浏览 2提问于2021-06-10得票数 3
是否有任何推荐的框架用于使用TeamsFx选项卡应用程序构建的应用程序进行单元测试，该应用程序可以集成在CI/CD管道中。
我试过用Jest和酶，但都搞错了。是否有任何可供参考的示例项目？
浏览 1提问于2022-03-28得票数 0
1回答
在我的react组件中，我使用redux和 export default connect(selector, null)(scriptLoader([https://someurl.com])(JusPayCard)); 我正在用jest和酶写单元测试。然而，我的jusPayCard.state()除了脚本加载器在使用酶编写测试时发送的2props之外，不会返回任何其他内容。当我从组件中删除脚本加载器导出时，它可以正常工作。我使用这个：https://www.npmjs.com/package/react-async-script-loader来异步获取javascript sdk。
浏览 9提问于2020-09-10得票数 1
我正在更新一个单元测试，在jest和酶上的一个反应组件，并遇到一个问题。
我最近添加了一个子组件(它本身连接到Redux)到父组件中，它使用的是酶的‘挂载’，单元测试失败了。
注意，该项目编译并运行良好。
这是CLI上的错误：
不变违规:无法在"Connect("ChildComponent名称此处“)的上下文中找到”存储“。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect("ChildComponent名称此处“)。
我已经确认Redux连接的子组件导致了这个问题。
是否可以在此实例中模
浏览 2提问于2019-09-23得票数 2
我正在使用jest和酶来构建这个测试，但是在构建它的时候我遇到了这个错误。
这就是测试
import React from 'react';
import { shallow, render } from 'enzyme';
import Title from './../';
describe('Title', () => {
it('should render correctly', () => {
const TitleDOM = render(<Title />);
浏览 0提问于2017-11-22得票数 4
1回答
这个测试怎么会失败呢？
、、、
我刚开始使用jest和酶进行单元测试。
我想测试组件是否有一个类名'comment-box‘。
在我进行单元测试的组件中，我确实有一个类名称为'comment-box‘的div。
但是，当我运行一个测试时，它失败了。
也许，我正在犯一个简单的错误，因为我是jest和酶的新手。
有人能帮我找出问题所在吗？谢谢!
登录我的测试跑步器。
FAIL src/__tests__/components/CommentBox.test.js
● CommentBox › has the right class
expect(received).toBe(expected)
浏览 0提问于2017-06-26得票数 0
回答已采纳
1回答
我正在使用jest和酶进行单元测试。我有一个登录表单，现在想要为它编写测试用例。我如何验证我传递的值。假设我用abc@gmail.com模拟电子邮件字段。我需要在提交表单时检查这些值。
浏览 7提问于2020-08-05得票数 0
回答已采纳
1回答
中的代码覆盖率
、、、
我有点被我一直在研究的任务困住了。这是关于中的代码覆盖。
我使用jest +酶实现了几个单元测试。另外还进行了一些功能测试，利用黄瓜获得了gherkin功能和木偶机的浏览器自动化。
我能够从webpack构建的代码中获得覆盖率，并通过功能测试在本地主机上使用木偶师和伊斯坦布尔服务。此外，我从使用jest的单元测试中获得了代码覆盖率(顺便说一句，它包括伊斯坦布尔来实现这一点)。
问题是:我觉得这是两个不同的度量标准，因为我用jest +酵素文件逐个文件测试组件，而另一方面，我有来自木偶师的代码覆盖，实际上是一个构建的js文件。
目标应该是从单元测试和功能测试中获得代码覆盖率。
所以，我的问题是：
浏览 0提问于2019-03-10得票数 1
回答已采纳
1回答
我使用Jest +酶对react应用程序进行单元测试，我也使用我公司拥有的依赖库作为node_modules，这些库是用Javascript (ES6)编写的，但是我的应用程序和测试脚本是用TypeScript编写的，所以在这里，当运行测试时，Jest从这些库( node_modules)抛出了类型错误，如下图所示，Abstract.jsx来自依赖node_modules
我在jest config中使用了下面的设置，这是没有帮助的，如何修复这个连续类型错误。请帮帮忙
"globals": {
"ts-jest": {
"diagnos
浏览 3提问于2019-02-12得票数 1
1回答
我使用Jest和Enzyme进行单元测试。
在我的test.js文件中
let wrapper = mount(<app />
我的测试单击包装器中的一个按钮。
wrapper.find('button').simulate('click')
组件呈现包装器之外的模态。
我需要得到一个模式的参考，以便我可以模拟点击按钮在其中。我可以通过document.body.children获得对模态的参考，但是我不能用它做任何事情。
如何使用酶来测试呈现包装器之外的元素？
浏览 4提问于2017-07-27得票数 2
2回答
只想通过使用Jest和Enzyme来实现我的react组件的单元测试。
有什么办法来检验订单吗？假设我有组件Button，并且希望同时呈现图标和文本。
当然，向用户提供对齐选项(图标优先或儿童优先)是很好的。
Button.js
class Button extends React.Component {
constructor() {
super();
}
render() {
let content;
const icon = (<Icon type='search' />);
浏览 2提问于2016-06-01得票数 3
回答已采纳
我正在尝试使用Jest为我的React应用程序中的一个功能组件进行SnapShot验证。下面是使用Jest的组件和测试文件
import React, { useState } from 'react';
import useForm from 'react-hook-form';
import { useAppState } from 'Shared/store';
...
const Form = () => {
const {customReducer, dispatch} = useAppState();
const { reg
浏览 15提问于2019-11-15得票数 7
1回答
仅使用Jest的单元测试链接
、、、、
我想知道是否有办法单独使用jest进行单元测试链接，以确保它们到达正确的位置。我查到的所有其他资源都使用了酶或其他应用程序。
例如:确保<Link to '/homepage>或<NavLink to '/homepage'>真正进入主页。
任何需要阅读的额外资源也将是有益的和值得赞赏的。
浏览 14提问于2021-12-30得票数 1
我正在尝试使用jest和react测试库对自定义钩子进行单元测试，在这种情况下抛出错误，但我无法捕获实际的错误消息，以下是我到目前为止的代码：
我的第一个钩子：
import react from 'react';
const useFirstHook = () => {
//I will add conditional logic later
throw new Error('my custom error is thrown')
const test1 = 'I am test 1';
retur
浏览 7提问于2021-03-09得票数 0
1回答
我有点被我一直在研究的任务困住了。这是关于中的代码覆盖。
我使用jest +酶实现了几个单元测试。另外还进行了一些功能测试，利用黄瓜获得了gherkin功能和木偶机的浏览器自动化。
我能够从webpack构建的代码中获得覆盖率，并通过功能测试在本地主机上使用木偶师和伊斯坦布尔服务。此外，我从使用jest的单元测试中获得了代码覆盖率(顺便说一句，它包括伊斯坦布尔来实现这一点)。
问题是:我觉得这是两个不同的度量标准，因为我用jest +酵素文件逐个文件测试组件，而另一方面，我有来自木偶师的代码覆盖，实际上是一个构建的js文件。
目标应该是从单元测试和功能测试中获得代码覆盖率。
所以，我的问题是：
浏览 0提问于2019-03-11得票数 1
我目前正在使用以下堆栈设置单元测试：
react (v15)组件使用类型记录(.tsx)编写
测试设置由jest(v21)和酶(V3)完成。
测试文件以普通js-文件的形式编写。
不幸的是，当我不断出错时，酶似乎出了点问题：
wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
^
SyntaxError: Unexpected token <
at new Script (vm.js:51:7)
at Generator
浏览 1提问于2018-02-05得票数 1
回答已采纳
1回答
使用酶进行单元测试
、、、、
我的React-Native应用程序中有以下组件。我被要求使用jest和酶来编写单元测试，但我是单元测试的新手。因此，如何分解并编写适当的测试超出了我的能力范围。有人能帮我一下吗？？
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { Button, Loader, ScreenContainer } from '../.
浏览 11提问于2019-07-11得票数 0
2回答
我们用酶和Jest进行测试。在我们的代码库中更新到redux的最新版本，所有连接的组件测试用例都开始失败(版本6)。使用
import { createMockStore } from 'redux-test-utils';
创建存储
使用旧版本的测试用例：
const wrapper = shallow(<SomeConnectedComponent />, {context: { store }});
这会导致错误。
不变违反:无法在“连接(SomeConnectedComponent )”上下文中找到“存储”。
阅读了几篇文章，得到了一个安装和包装提供者包装器
浏览 0提问于2019-12-05得票数 6
回答已采纳
我希望我的jest +酶单元测试能让saveSignUpFirstCreds调用：
this.setState({ requestInProgress: true, errorMessage: null }, () => {
return Api.registerPhone(values.phone)
.then(() => {
this.props.saveSignUpFirstCreds(values);
this.handleSubmitSuccess();
})
});
我的api有一个jest手册mock，到目前为止我的代码看起
浏览 0提问于2017-11-08得票数 2
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给Popover的页脚属性的Button触发单击
const React, {Component} from 'react';
const {Popover, Button} from 'slds'; // Any UI library
class My Component extends Component {
render() {
return(
<Popover
footer={
浏览 0提问于2019-08-27得票数 1
到目前为止，在单元测试中，react路由器匹配参数被检索为组件的支持。因此，测试考虑特定匹配的组件(带有特定的url参数)是很容易的:当我们在测试中呈现组件时，我们只需根据需要精确地完成路由器匹配的支持(为此我使用了酶库)。
我真的很喜欢用新的钩子来检索路由信息，但是我没有找到关于如何在单元测试中模拟一个反应路由器匹配的例子，如何使用新的反应性路由器挂钩？
浏览 23提问于2019-09-26得票数 108
回答已采纳
1回答
我无法为以下情况设置单元测试:很难想象应该测试什么 使用JS/ REACT +jest/酶 目标是确保函数被调用，以及输出示例是什么 function prepadSigned(hexStr) {
const msb = hexStr[0];
if (msb < '0' || msb > '7') {
return `00${hexStr}`;
}
return hexStr;
}
浏览 15提问于2018-12-21得票数 0
回答已采纳
我正在寻找开发一个React JS应用程序，但我想从TDD的角度出发。我希望为这项工作开发一个测试套件，这样我就可以在Chrome、Firefox、Edge和Safari中运行测试。然后围绕这些测试编写DEV代码，使测试通过。
我研究过酶和Jest。这两个框架看起来都更像单元测试框架，而不是UI功能测试框架(有点像Webdriver / Selenium)。对我来说，更重要的是验证适当的UI元素是否按预期出现在页面上，而不是验证React组件是否呈现。
有人能建议我使用什么框架和包来完成这个任务吗？
浏览 2提问于2018-08-13得票数 0
1回答
我正在使用jest、酶、react和rxjs编写单元测试。我模仿了rxjs/ajax，如下所示。 import { ajax } from 'rxjs/ajax';
jest.mock('rxjs/ajax', () => {
return {
ajax: jest.fn().mockImplementation((args) => {
return {
subscribe: jest.fn().mockImplementation(args => {
浏览 25提问于2021-03-24得票数 0
3回答
我试着用玩笑和酶来测试我的反应成分。
当我在特定的测试用例中将酶导入到json时，它可以工作。但是，我不想手动地做它，我想配置jest来完成它。
我已经尝试过在我的jest配置中添加"snapshotSerializers"：“酶到json/序列化程序”，但它似乎不起作用。
如何将jest配置为在包装上使用酶对json？
这段代码起作用
Header.test.js
import React from 'react'
import { shallow } from 'enzyme'
import toJSON from 'enzyme-t
浏览 0提问于2019-03-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
