如何在React中编写功能测试-使用酶和Jest
在React中编写功能测试可以使用酶（Enzyme）和Jest这两个工具。酶是一个用于React组件测试的JavaScript库，而Jest是一个用于JavaScript应用程序的测试框架。
下面是在React中编写功能测试的步骤：
- 安装所需的依赖：
- 首先，安装酶和Jest：
- 首先，安装酶和Jest：
- 然后，安装所需的Enzyme适配器。如果你使用的是React 16，可以安装enzyme-adapter-react-16：
- 然后，安装所需的Enzyme适配器。如果你使用的是React 16，可以安装enzyme-adapter-react-16：
- 配置Jest和Enzyme：
- 在项目的根目录下创建一个
setupTests.js文件，并添加以下内容： - 在项目的根目录下创建一个
setupTests.js文件，并添加以下内容： - 这将配置Jest使用Enzyme适配器。
- 在项目的根目录下创建一个
- 创建功能测试文件：
- 在测试文件夹中创建一个新的测试文件，例如
App.test.js。 - 导入所需的依赖：
- 导入所需的依赖：
- 编写测试用例：
- 编写测试用例：
- 这个测试用例测试了App组件是否正确渲染了应用程序的标题。
- 在测试文件夹中创建一个新的测试文件，例如
- 运行测试：
- 在命令行中运行以下命令来执行测试：
- 在命令行中运行以下命令来执行测试：
- Jest将运行测试并输出结果。
这是一个简单的在React中编写功能测试的示例。你可以根据需要编写更多的测试用例来覆盖你的应用程序的各个方面。酶和Jest提供了丰富的API和功能，可以帮助你编写全面的功能测试。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器。
- 腾讯云对象存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理大量非结构化数据。了解更多信息，请访问腾讯云对象存储。
希望这个回答能够帮助你在React中编写功能测试，并了解腾讯云相关产品。
相关·内容
我目前正在使用以下堆栈设置单元测试：
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
回答已采纳
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
我正在用Jest和酶为我的react组件编写测试用例。我有一个使用了indexOf方法的组件。现在，当我运行Jest时，它显示该特定行的测试未被覆盖。
覆盖范围报告：
浏览 2提问于2018-06-28得票数 0
我正在为我的react项目编写单元测试用例，并使用jest和酶来编写测试用例。我看过那些开玩笑的文件
这解释了jest.spyOn()方法，但我没有完全理解。
因此，我想知道更多关于我们应该使用jest.fn()和应该/必须在哪里使用jest.spyOn()的具体位置的详细信息。这将是一个很大的帮助，如果可以解释为两个方法的例子。
谢谢
浏览 2提问于2019-08-25得票数 84
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
使用jest和酶在react中编写单元测试。在检查组件状态时，它抛出错误"ReactWrapper:: state ()仅能在类组件上调用“。 import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
浏览 27提问于2019-10-17得票数 4
回答已采纳
我对测试非常陌生。 假设我有一个下面的组件 export default function ResolutionCount({ componentUsedIn }) {
const dispatch = useDispatch();
const userID = useSelector(
(state) => state.userInfoReducer.userInfo[0]["user_id"]
);
useEffect(() => {
dispatch({
type:
浏览 17提问于2020-09-23得票数 0
2回答
我已经创建了一个函数，我想为该函数编写一个测试用例。我在该函数中返回HTML内容。
我的函数代码是-
export function executeScenario(handleExecuteScenarioClick: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined, classes: any , buttonTitle:string) {
return <Button id="executescenario" variant="c
浏览 0提问于2020-06-12得票数 2
我正在将一个类组件重构为一个函数组件。
在我的测试文件中，我使用的是酶，但我正在迁移到react-testing-library
这是我用酶做的测试
it('should change module when clicked button login', () => {
const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
const instance = wrapper.instance()
jest.spyOn(instance, 'setMo
浏览 2提问于2020-12-01得票数 1
我正在寻找开发一个React JS应用程序，但我想从TDD的角度出发。我希望为这项工作开发一个测试套件，这样我就可以在Chrome、Firefox、Edge和Safari中运行测试。然后围绕这些测试编写DEV代码，使测试通过。
我研究过酶和Jest。这两个框架看起来都更像单元测试框架，而不是UI功能测试框架(有点像Webdriver / Selenium)。对我来说，更重要的是验证适当的UI元素是否按预期出现在页面上，而不是验证React组件是否呈现。
有人能建议我使用什么框架和包来完成这个任务吗？
浏览 2提问于2018-08-13得票数 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
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给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
2回答
令我惊讶的是，许多博客都在编写单元测试，以便同时使用Jest和酵素进行反应应用程序。不能，我们用唯一的玩笑或唯一的酶来编写反应应用程序的单元测试？
如果是的话，为了得到一个成分，我们在酶中使用浅层()，而在Jest中使用什么？
浏览 5提问于2020-05-12得票数 0
回答已采纳
我是Jest/Enzyme的新手，我有以下组件： App.js:
import React,{useState} from 'react';
import ChildA from './Children/ChildA';
import ChildB from './Children/ChildB';
export const app = () => {
const [open, setOpen] = useState(false);
return(
<Fragment>
{
浏览 19提问于2020-07-10得票数 0
回答已采纳
2回答
我试图为一个包含媒体播放器的React组件编写Jest测试。我正在使用酶的mount方法来尝试和测试组件，但似乎DashJS媒体播放器未能正确安装。
在我的componentDidMount方法中，我有以下代码：
this.videoManager = dashjs.MediaPlayer().create();
this.videoManager.initialize(this.videoPlayer, videoUrl, true);
// Where this.videoPlayer is a reference to an HTML <video>
浏览 1提问于2018-03-29得票数 5
我对单元测试很陌生，我刚刚开始为我的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
回答已采纳
我正在尝试为我的React组件编写一个测试，使用TypeScript、Jest作为我的测试运行器，并使用酶来测试我的React组件。每当我将我的组件传递给shallow酶函数时，我就会得到ts错误"'Navbar‘引用了一个值，但在这里被用作一个类型。“，下面我得到了一个eslint错误"Parsing error：'>’expected”。
我在其他一些组件上尝试过，当作为参数传递到shallow函数时，所有组件都有相同的错误。我怀疑这可能与我的TS配置有关，但在我的生活中，我似乎找不到解决方案。
下面是Navbar.tsx的代码：
import Rea
浏览 1提问于2019-10-11得票数 20
回答已采纳
6回答
我正在为一个使用Jest和酶的React应用程序编写测试。酶3.x引入适配器，以提供不同版本的React的兼容性。给出了如何设置它的示例：
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
注释中提到的“安装文件”是什么？这是一个可以在所有测试之前运行的文件吗？在一个React项目中，这个文件到哪里去？它需要一个特定的名字吗？
浏览 0提问于2018-05-16得票数 3
回答已采纳
我正在使用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
js和react newbie...playing以及测试框架……下面是代码：
import React from 'react';
// import CheckboxWithLabel from '../CheckboxWithLabel';
import {shallow} from 'enzyme'; //not installed...
//var x = require ('../CheckboxWithLabel.js');
test('CheckboxWithLa
浏览 1提问于2018-11-15得票数 15
回答已采纳
在CSS中考虑，
.content
{
width:500px;
box-sizing: border-box;
}
我在react组件中添加了这个css类，如下所示
const Banner = () => {
return (<div className="content">This is message content</div>);
}
如何编写jest和酶测试用例，以确保‘盒大小’与‘边框’的正确应用？
注意:我可以编写测试用例以确保添加到这个元素中的".content“类。但确切地说，我需要编写测试用例，
浏览 4提问于2019-12-26得票数 0
1回答
我有一个父母和一个孩子。
父组件：
const ParentComponent = () => {
const click_button = (role) => {
document.getElementById(role).innerHTML = role;
}
return (
<div>
<ChildButton id= 'button_child' name='button_1' onClick={() => {
浏览 2提问于2021-03-18得票数 0
回答已采纳
1回答
我是一个新的用户，试图理解反应组件的测试。我使用酶与Jest在一个打字的环境。
我正在尝试测试的组件之一是使用material按钮实现的NavBar组件。
const NavBarLinks = (): JSX.Element => (
<>
<Button
color="inherit"
component={NavLink}
activeClassName={navbar.highlighted}
to="/about"
>
About
&l
浏览 2提问于2020-01-02得票数 1
回答已采纳
如果在新的React版本0.57和TypeScript中将测试与Jest和酶集成，它们将无法工作。以下是复制的步骤：
创建一个新的React本机项目：
react-native init MyApp -package "com.my.app" --template typescript && node MyApp/setup.js
安装所有与Jest和Enzyne相关的软件包：
npm install --save-dev react-dom enzyme enzyme-react-adapter-16 jest-fetch-mock ts-jest
添加jes
浏览 0提问于2018-09-15得票数 17
回答已采纳
2回答
我不能得到答案，为什么不能使用jest和react-testing-library在react中访问函数组件中的方法。 我试过用酶，但我发现一切都变成了RTL。 import React from "react";
const simpleComponents = (props) => {
const simpleMethod = () =>{
// method logic
};
return <h1>test</h1>;
};
}
export default simpleCom
浏览 19提问于2020-04-19得票数 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/酶在react中测试setTimeout功能
setTimeout(() => {
}, 500);
我试着这样做：
expect(setTimeout).toHaveBeenCalledTimes(1);
expect(setTimeout).toHaveBeenLastCalledWith(() => { }, 500);
但是测试失败了，因为
Expected: [Function anonymous], 500
Received: [Function anonymous], 500
有人能帮我一下吗？？
浏览 0提问于2020-09-17得票数 0
1回答
我使用jest和酶来测试我的组件。如果我有以下类组件
import React, { Component } from "react";
export class Test extends Component {
state = {
isLoading: false,
};
onClick = () => {
this.setState({ isLoading: true });
};
render() {
return (
<div>
<button onClick={this
浏览 0提问于2021-03-17得票数 1
我已经用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回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
1回答
我正在用玩笑和酶测试我的成分。我想在加载整个页面时加载我的组件，所以我在useEffect中使用load事件，下面是我的代码
const RatingsAndReviews = (props: RatingsAndReviewsProps) => {
const [pageLoaded, setPageLoaded] = useState<boolean>(false)
const handleLoad = () => {
if (document.readyState === 'complete') {
setTimeout((
浏览 4提问于2022-04-21得票数 1
回答已采纳
1回答
我有一个React应用程序，我用jest和酶添加了测试。我对一个名为<Duration.jsx />的react组件进行了单元测试。覆盖率显示了<Duration.jsx />和files.scss中的所有组件覆盖率。正常吗？
浏览 14提问于2018-12-19得票数 1
回答已采纳
我最近为我的react项目做了jest酶的配置。问题是来自react代码的任何警告都会导致我的测试用例失败。有没有办法进行jest酶配置，这样即使出现一些警告，我的测试也能运行？我的代码是全功能的，我想忽略测试的警告，只想让我的测试用例运行，而不是在出现任何小警告时立即失败。
浏览 1提问于2017-05-20得票数 3
当我尝试使用Jest +酶的快照测试时，我得到了一个错误：Invalid Chai property: toMatchSnapshot。我已经将我的React版本更新到了16.2，并且我使用了enzyme-to-json库和酶3。
代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import ConnectedApp, { App } from './App';
import { ConnectedRouter } from 'react-router-
浏览 0提问于2017-12-16得票数 8
我有以下内容：
export const DeviceModule = (props: Props) => {
const [isTooltipVisible, changeTooltipVisibility] = useState(false)
const deviceRef = useRef(null)
useEffect(() => {
if (deviceRef && deviceRef.current) {
deviceRef.current.addEventListener(EVENT_TYPE.MOUSEOVER, ()
浏览 0提问于2021-03-10得票数 1
回答已采纳
反应用16.3.1，jest 16.3.1，酶3.3.0。
在React组件中，我创建了一个react，用于确保在挂载组件时浏览器位于页面顶部。
class PageView extends React.Component {
constructor(props) {
super(props);
this.topOfPageRef = React.createRef();
}
componentDidMount() {
ReactDOM.findDOMNode(this.topOfPageRef.current).scrollIntoView();
浏览 4提问于2018-09-14得票数 3
回答已采纳
假设我有一个简单的组件，如下所示。
import React, { useState } from "react";
const Counter = () => {
const [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<>
<p>Counter value is: {counter}</p>
<butto
浏览 0提问于2019-12-25得票数 8
回答已采纳
4回答
最近，React 18发布了，我将我的项目升级到了18，我注意到所有由Jest和酵素编写的单元测试都失败了。我已经将从酶装入作为组件的包装器，并注意到以下错误：
TypeError: Cannot read property 'child' of undefined
我还试着检查它是否支持React 18，但没有找到任何合适的链接。
有人对此有任何想法吗？或者，在这种情况下，有什么解决办法可以遵循吗？
浏览 30提问于2022-04-27得票数 13
我正在尝试使用jest和酶法测试一个react组件，我已经为它们安装了必要的包，然后按照下面所示配置了我的setupTests.js，但是仍然存在相同的错误，即没有找到酶模块，也有“浅的”错误。这就是我试着用浅酶的地方
import React from "react";
import { render, screen, cleanup } from '@testing-library/react'
import { shallow } from "@wojtekmaj/enzyme-adapter-react-17"
//some nece
浏览 2提问于2021-12-27得票数 0
回答已采纳
1回答
我对Jest和单元测试也很陌生，我想知道使用jest可以涵盖什么样的场景。
在我开始之前，我有一些具体的问题：
在单元测试中应该包括什么反应应用程序？
我是否需要其他有Jest的库来进行断言、嘲弄等等？我读过关于柴、西农等的文章。我不知道它们为什么会被使用，也不知道它们是否需要和Jest一起使用。
酶到底是用来做什么的？这是Jest必须使用的吗？
我需要像卡玛这样的小丑跑任务吗？或者Jest有一个内置的？我该怎么安排呢。
浏览 6提问于2017-08-09得票数 0
回答已采纳
如何使用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
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
1回答
我知道我的问题非常抽象，但我很难理解什么应该/不应该在React应用程序中测试。
我正在寻找的东西:类似Git的流行项目的存储库，带有高级的react&jest和酶测试，我可以把它作为一个现实的例子。
谢谢!
浏览 1提问于2019-03-22得票数 0
回答已采纳
2018年/07/13年度最新情况：
在黑客攻击之后，我明白了为什么testRegex不起作用。见下面我自己的答案。
原始问题：
我正在为我的React.js项目编写测试代码。我使用react-scripts和enzyme (我认为这也意味着jest )来运行和管理测试。下面是package.json文件：
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"react
浏览 0提问于2018-07-11得票数 2
回答已采纳
我建立了一个组件的反应和材料-UI。我用的是React和Redux。
我的index.jsx如下所示：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/conf
浏览 2提问于2017-04-09得票数 14
回答已采纳
我正在尝试使用jest和酶为react中的容器编写单元测试。我的react代码如下：
AgentForm.js
import {
resetStatusMessage,
formSetError,
formResetError,
createAgent,
updateAgent
} from "../../actions";
componentWillMount = () => {
const {
agents,
match,
push,
resetS
浏览 0提问于2018-01-29得票数 0
5回答
我已经读过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
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
我目前正在使用标志--coverage来获取项目中测试覆盖率的一个很好的摘要：
node_modules/jest/bin/jest.js --coverage
有没有办法只获取json、xml或html文件中通过测试和失败测试的数量？
我用的是react-native +酶。
浏览 1提问于2017-08-16得票数 2
我正在尝试使用Jest为react类编写测试用例，在material中使用frameworks.My react类使用卡类。我的部分代码是这样的。
<Card>
<CardHeader
avatar = {<div className={classes.imgHolder}><img src='/opt/imgs.png'/></div>}
actions = {<div/>}
title = {<div/>}
/>
<
浏览 0提问于2019-05-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
