如何使用Jest/酶测试AgGridReact
Jest和酶是两个流行的JavaScript测试框架，用于测试前端应用程序。AgGridReact是一个用于构建数据网格的React组件库。下面是关于如何使用Jest和酶测试AgGridReact的完善答案：
Jest是一个基于JavaScript的测试框架，它提供了一套简单而强大的API，用于编写和运行测试用例。酶是Jest的一个补充库，它提供了一些额外的工具和断言，用于测试React组件。
要使用Jest和酶测试AgGridReact，首先需要安装它们。可以使用npm或yarn来安装它们：
npm install --save-dev jest enzyme enzyme-adapter-react-16或
yarn add --dev jest enzyme enzyme-adapter-react-16安装完成后，需要配置Jest和酶以在测试中使用它们。在项目的根目录下创建一个jest.config.js文件，并添加以下内容：
module.exports = {
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
};然后，在项目的根目录下创建一个setupTests.js文件，并添加以下内容：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });现在，可以编写测试用例来测试AgGridReact组件。假设我们要测试一个名为MyGrid的AgGridReact组件，可以创建一个名为MyGrid.test.js的文件，并添加以下内容：
import React from 'react';
import { shallow } from 'enzyme';
import MyGrid from './MyGrid';
describe('MyGrid', () => {
it('renders without crashing', () => {
shallow(<MyGrid />);
});
it('renders the correct number of rows', () => {
const data = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const wrapper = shallow(<MyGrid data={data} />);
expect(wrapper.find('AgGridReact').prop('rowData')).toHaveLength(2);
});
});在上面的示例中，我们使用shallow函数来创建一个浅渲染的组件实例，并进行断言来验证组件的行为和输出。
以上是一个简单的示例，你可以根据实际需求编写更多的测试用例来覆盖不同的场景和功能。
推荐的腾讯云相关产品：腾讯云函数（Serverless云函数计算服务），腾讯云对象存储（高可用、低成本的云端存储服务），腾讯云数据库（高性能、可扩展的云数据库服务）。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
腾讯云对象存储产品介绍链接地址：https://cloud.tencent.com/product/cos
腾讯云数据库产品介绍链接地址：https://cloud.tencent.com/product/cdb
相关·内容
3回答
解决linter错误-“浅”没有定义
reactjs、jestjs、babeljs、eslint、enzyme
我用的是玩笑和酶。在我的eslint文件中，我在env下添加了jest作为true。但我得到了一个皮棉的浅层错误，因为我已经包括它的全球范围。错误是-错误“浅”没有定义，没有定义
setupTests.js
//as we are accessing our application with a http://localhost prefix, we need to update our jest configuration
import { shallow, render, mount, configure } from 'enzyme';
import Adapter f
浏览 1提问于2018-10-01得票数 7
回答已采纳
2回答
shallowWrapper是空的，测试快照Jest/酶？
javascript、testing、jestjs、enzyme、enzyme-to-snapshot
我不知道在运行快照测试时为什么会得到空的shallowWrapper对象，我使用的是Jest和
我在App.test.js.snap文件中得到了什么：
// Jest Snapshot v1, "goo.gl/fbAQLP"
exports[`renders App component 1`] = `ShallowWrapper {}`;
我的package.json文件：
{
"name": "test",
"version": "0.1.0",
"private": true,
浏览 4提问于2020-09-22得票数 2
回答已采纳
5回答
setupTests.js不自动加载CRA反应应用程序
reactjs、jestjs、enzyme、create-react-app、babel-jest
我已经读过src/setupTests.js应该在每个测试之前加载，但是我仍然看到每个测试都失败了，错误：
“酶内部错误:酶期望配置适配器，但没有发现任何适配器。”
这是我的src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'whatwg-fetch';
Enzyme.configure({ adapter: new Adapter() });
这是我的package.json：
浏览 3提问于2018-12-05得票数 10
回答已采纳
7回答
使用jest模拟react-router-dom挂钩不起作用
reactjs、react-router、jestjs、enzyme、react-hooks
我正在使用酶的浅层方法来测试一个组件，该组件使用useParams钩子从URL参数中获取ID。
我试图模拟useParams钩子，这样它就不会调用实际的方法，但它不起作用。我仍然得到TypeError: Cannot read property 'match' of undefined，所以它调用实际的useParams，而不是我的mock。
我的组件：
import React from 'react';
import { useParams } from 'react-router-dom';
export default () =>
浏览 68提问于2019-11-16得票数 19
2回答
如何使用Jest设置酶适配器配置文件？
reactjs、jestjs、enzyme
我遵循了其他项目和线程中的说明，但无法让React找到酶配置文件。
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"jest": {
浏览 0提问于2019-06-16得票数 1
回答已采纳
1回答
使用组件进行测试已呈现
reactjs、jestjs、enzyme
我正在使用Jest和酶进行单元测试。我有一个根据媒体类型呈现组件的组件。在单元测试下，我正在检查是否呈现了适当的组件。 我的组件 const getComponent = {
'image': ImageComp,
'video': VideoComp,
'other': DocumentComp
}
const MediaDisplay = (props) => {
let { assetInfo } = props;
let source = assetInfo.assetUrl;
const
浏览 19提问于2020-04-07得票数 0
1回答
如何找到挂载上没有的组件？
javascript、reactjs、jestjs、enzyme
我有一个叫做"Paginator“的组件，但是它在挂载时是不可用的：
<Col xs='4'>
{
(() => {
if (this.state.gridApi) {
return <Paginator pages={this.state.gridApi.paginationGetTotalPages()} gridApi={this.state.gridApi} />
}
return <><
浏览 2提问于2019-05-30得票数 1
2回答
酵素期望配置适配器，但找不到适配器。
javascript、reactjs、jestjs、enzyme
调用enzym's mount函数有问题。上面写着：
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme's top level APIs, where `Adapter` is the adapter
浏览 3提问于2018-01-16得票数 14
1回答
无法从全局配置访问浅源
reactjs、jestjs、enzyme
我试图在我的反应应用程序中使用酶的全局配置。我读了一些关于它的文件，并想试一试。但我一定是遗漏了什么。
下面是我的测试脚本(Grid.test.js)，用于网格组件。请注意，此文件位于组件集文件本身的同一个文件夹中。我没有为测试脚本维护任何单独的“测试”文件夹-
import React from 'react';
import Grid from './Grid';
test('Grid Renders',()=>{
const wrapper=shallow(<Grid></Grid>)
expect(
浏览 1提问于2019-04-09得票数 0
回答已采纳
1回答
在测试时，_enzymeAdapterReact.default不是构造函数
javascript、reactjs、react-native、jestjs、enzyme
当测试与jest和酶TypeError: _enzymeAdapterReact.default is not a constructor反应时，我遇到了这个问题--本机成分
下面是我的dev依赖项：
"@babel/core": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^
浏览 5提问于2022-04-12得票数 0
2回答
设置用于测试的localStorage与jest反应应用程序
reactjs、jestjs、enzyme、create-react-app
我已经用create-react-app创建了一个空应用程序。它在pckage.json上提供了一个测试脚本，并提供了一个示例App.test.js。在第一步中，我希望根据的文档设置测试环境。在我的应用程序中，我将使用localStorage。假设像下面这样的动作要被测试
export const cancel = () => {
localStorage.removeItem("MyAppData");
return { type: types.USER_CANCEL};
};
除了酶部分外，还说明了如何初始化localStorage。所以我得到了一个setup
浏览 1提问于2018-09-10得票数 5
回答已采纳
1回答
使用Jest模拟
reactjs、jestjs、enzyme
我试图在所有测试中模拟我的一个组件。原因是它在本地包中使用了较早版本的D3的副本，并且这个D3引用了"this.document"，在运行Jest测试时出现了错误。这可能是由于这里描述的原因：
package.json
"devDependencies": {
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "5.6.0",
"eslint
浏览 0提问于2018-11-22得票数 2
我使用了Create React App，并且已经在src/setupTests.js上声明了这一点： import '@testing-library/jest-dom';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() }); 但每次我在测试文件上使用expect(anything).toBeInTheDocument()时，当我运行测试时，我得到： Ty
浏览 246提问于2020-07-17得票数 6
3回答
物料UI +酶检测组件
reactjs、jestjs、material-ui、enzyme
我在React中有一个组件，我正在尝试用Jest测试它，不幸的是测试没有通过。
组件代码：
import React, {Component} from 'react';
import ProductItem from '../ProductItem/ProductItem';
import AppBar from "@material-ui/core/es/AppBar/AppBar";
import Tabs from "@material-ui/core/es/Tabs/Tabs";
import Tab from "
浏览 4提问于2018-06-19得票数 13
1回答
如何传递用Enzyme.js呈现的组件的道具？
reactjs、ecmascript-6、jestjs、enzyme
我有一个SongLink组件，如下所示：
import React from 'react'
const SongLink = props => (
<ul className='search-results__ul'
key={props.result.id}
onClick={props.handleClick}
>
{props.result.name} by {props.result.artist}
</ul>
)
export default SongLink
我正在尝
浏览 3提问于2017-11-21得票数 10
回答已采纳
4回答
哪个酶适配器与React 17一起工作？
reactjs、unit-testing、enzyme
我有一个反应应用程序，我想开始用酶编写单元测试。酶的讨论多达16种反应的版本。
在src/setupTests.js中，我现在有
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
但我的应用程序使用的是Reactive17.0.1版本。反应17的酶适配器是什么？
浏览 5提问于2020-11-03得票数 70
回答已采纳
1回答
在jest中浅层和渲染有什么区别？
javascript、reactjs、testing、jestjs
说真的，从酶中使用浅层和渲染有什么不同？ 下面是这两者的一个示例： 使用浅层测试渲染： import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
浏览 10提问于2019-01-17得票数 0
回答已采纳
2回答
为什么我得到以下错误:酶内部错误:配置的酶适配器没有从EnzymeAdapter基类继承
reactjs、unit-testing、testing、jestjs、enzyme
我开了玩笑和酶，不能让它运行。它抱怨EnzymeAdapter基类。
我试过了
configure({})与import { configure } from 'enzyme'
Enzyme.configure({})与import Enzyme from 'enzyme'
new Adapter()与import Adapter from 'enzyme-adapter-react-16';
new EnzymeAdapter()与import EnzymeAdapter from 'enzyme-adapter-react-16
浏览 0提问于2019-08-05得票数 4
回答已采纳
1回答
测试用酶和玩笑做出反应，错误不能从'index.js‘中找到模块'@babel/polyfill/lib/noConflict’
reactjs、unit-testing、jestjs、enzyme
我对单元测试很陌生，我刚刚开始为我的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回答
哪个单元测试设置是正确的？这两个测试是否都在检查函数是否正确以及是否正常工作？
javascript、reactjs、unit-testing
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'e
浏览 42提问于2019-01-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
