使用Jest和酶对AntD模型进行单元测试
Jest是一个流行的JavaScript测试框架，而酶是Jest的一个补充库，用于测试React组件。AntD是一个基于React的UI组件库。使用Jest和酶对AntD模型进行单元测试的过程如下：
- 首先，确保项目中已经安装了Jest和酶，可以通过以下命令进行安装：
npm install jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev- 在项目中创建一个名为
__tests__的文件夹，用于存放测试文件。 - 创建一个以
.test.js为后缀的测试文件，例如antd.test.js。 - 在测试文件中，导入所需的模块和组件，例如：
import React from 'react';
import { shallow } from 'enzyme';
import { Button } from 'antd';- 编写测试用例，对AntD组件的功能进行测试。例如，测试一个按钮组件的点击事件：
describe('AntD Button', () => {
it('should call onClick when button is clicked', () => {
const onClickMock = jest.fn();
const wrapper = shallow(<Button onClick={onClickMock}>Click Me</Button>);
wrapper.simulate('click');
expect(onClickMock).toHaveBeenCalled();
});
});- 运行测试，可以使用以下命令：
npm test上述测试用例会模拟按钮的点击事件，并验证传递给按钮的onClick函数是否被调用。
在云计算领域，单元测试对于确保代码质量和减少错误非常重要。使用Jest和酶进行单元测试可以方便地测试AntD模型，确保其正常运行并符合预期行为。
关于腾讯云的相关产品和产品介绍链接，腾讯云提供了云开发服务，其中包含云函数和云存储等服务，可以用于构建和部署基于云的应用。具体可参考腾讯云云开发产品介绍页面：https://cloud.tencent.com/product/tcb
相关·内容
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
回答已采纳
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
我用Antd与反应，Jest和酶。当测试简单的浅渲染时，我得到了错误
“无法从'enquire.js‘中找到模块'slider.js'”
在(node_modules\jest-resolve\build\index.js:151:17 Resolver.resolveModule
在对象上。(node_modules\react-slick\lib\slider.js:37:38)
在对象上。(node_modules\react-slick\lib\index.js:3:18)
浏览 8提问于2017-06-01得票数 0
回答已采纳
我正在为我的react项目编写单元测试用例，并使用jest和酶来编写测试用例。我看过那些开玩笑的文件
这解释了jest.spyOn()方法，但我没有完全理解。
因此，我想知道更多关于我们应该使用jest.fn()和应该/必须在哪里使用jest.spyOn()的具体位置的详细信息。这将是一个很大的帮助，如果可以解释为两个方法的例子。
谢谢
浏览 2提问于2019-08-25得票数 84
我正在使用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
回答已采纳
1回答
我们可以使用酶、jest为样式编写单元测试吗？例如，可见性项目
display: none;
wrapper.get(0).style - do not work for me
浏览 0提问于2017-11-08得票数 0
1回答
我有一个React应用程序，我用jest和酶添加了测试。我对一个名为<Duration.jsx />的react组件进行了单元测试。覆盖率显示了<Duration.jsx />和files.scss中的所有组件覆盖率。正常吗？
浏览 14提问于2018-12-19得票数 1
回答已采纳
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
是否有义务用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
是否有任何推荐的框架用于使用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
回答已采纳
1回答
仅使用Jest的单元测试链接
、、、、
我想知道是否有办法单独使用jest进行单元测试链接，以确保它们到达正确的位置。我查到的所有其他资源都使用了酶或其他应用程序。
例如:确保<Link to '/homepage>或<NavLink to '/homepage'>真正进入主页。
任何需要阅读的额外资源也将是有益的和值得赞赏的。
浏览 14提问于2021-12-30得票数 1
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
我正在尝试使用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
2回答
我们用酶和Jest进行测试。在我们的代码库中更新到redux的最新版本，所有连接的组件测试用例都开始失败(版本6)。使用
import { createMockStore } from 'redux-test-utils';
创建存储
使用旧版本的测试用例：
const wrapper = shallow(<SomeConnectedComponent />, {context: { store }});
这会导致错误。
不变违反:无法在“连接(SomeConnectedComponent )”上下文中找到“存储”。
阅读了几篇文章，得到了一个安装和包装提供者包装器
浏览 0提问于2019-12-05得票数 6
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
我正在使用jest和enzyme进行单元测试。下面是我的index.js文件。我需要测试文件的openNotification和uploadErrorNotification函数。但是，仅导出uploadErrorNotification函数。那么，我如何测试这两个函数呢？
此外，除了jest和enzyme之外，我不想使用任何其他的libray。
//index.js
import {
notification
} from 'antd';
const openNotification = (message, description, classN
浏览 0提问于2018-11-16得票数 2
2回答
当Jest与Antd、React和Parcel一起使用时，我得到了以下错误。Jest抱怨Antd css文件。Jest是否应该在默认情况下包含node_modules？如果不是，是否有可能将其排除？ Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not > plain JavaScript.
{ProjectPath}/node_modules/antd/lib/s
浏览 43提问于2020-09-12得票数 3
我希望我的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
1回答
我尝试使用Jest和Enezym在React中对AntD模式进行单元测试，它给出了以下错误： ? 还有另一个 ? 这也是:不变冲突:对象作为React子对象无效(found:具有键{destroy，update}的对象)。如果您打算呈现一个子级集合，请改用数组。 这是我创建的模型 import propTypes from 'prop-types';
import { Modal } from 'antd';
const SuccessModal = props => {
const { title, content } = props
浏览 34提问于2019-03-06得票数 2
1回答
我要测试的文件导入ant设计和代码使用解构赋值，如下所示。
import { Select } from 'antd';
const { Option } = Select;
当我运行jest单元测试时，它显示以下错误。
● Test suite failed to run
ReferenceError: Select is not defined
> 16 | const { Option } = Select;
| ^
但是当我直接使用select.option时，测试可以很有趣地运行。
浏览 0提问于2020-05-25得票数 1
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给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
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
回答已采纳
5回答
我的组件中有这个选择器，其默认状态是'' (empty)字符串，但是当触发change事件时，用户可以选择这三个值中的任何一个，即6、12或24。
it("feedform testing the selector feed frequency for value of 6, 12, 24 ", () => {
const addFeedForm = shallow(
<FeedForm
submitForm={() => {}}
setFeedData={() => {}}
formTyp
浏览 2提问于2018-07-25得票数 29
回答已采纳
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
我已经做了redux和saga测试，但现在我想测试结合redux-saga测试与酶和jest.is它可能与jest和酶。
浏览 18提问于2019-04-18得票数 0
1回答
jquery事件处理程序涉及React Component didMount生命周期方法。
“守则”的内容如下：
export default class Home extends Component {
componentDidMount() {
Usabilla("SMART_MODEM");
$( ".option-label" ).parent().on( "click", function() {
console.log(">>>>>
浏览 0提问于2018-08-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
