首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Jest和Enzyme模拟“提交”后测试更新的状态

基础概念

Jest 是一个流行的 JavaScript 测试框架,用于编写单元测试、集成测试和端到端测试。它提供了丰富的断言库和模拟功能,使得测试代码更加简洁和可靠。

Enzyme 是一个用于测试 React 组件的工具库,它提供了浅渲染(shallow rendering)、静态渲染(static rendering)和完整 DOM 渲染(full DOM rendering)等功能。

相关优势

  • Jest 的优势在于其快速的测试执行速度、内置的模拟功能和丰富的断言库。
  • Enzyme 的优势在于其与 React 的紧密集成,提供了方便的组件渲染和测试方法。

类型

  • Jest 主要用于单元测试和集成测试。
  • Enzyme 主要用于 React 组件的测试。

应用场景

  • JestEnzyme 组合使用,可以有效地测试 React 应用中的组件行为和状态更新。

示例代码

假设我们有一个简单的 React 组件 Form.js,它包含一个提交按钮和一个状态 isSubmitted

代码语言:txt
复制
// Form.js
import React, { useState } from 'react';

const Form = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = () => {
    setIsSubmitted(true);
  };

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
      {isSubmitted && <p>Form submitted!</p>}
    </div>
  );
};

export default Form;

我们可以使用 Jest 和 Enzyme 来测试这个组件的提交行为:

代码语言:txt
复制
// Form.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Form from './Form';

describe('Form component', () => {
  it('should update state to isSubmitted true after submit', () => {
    const wrapper = shallow(<Form />);
    const button = wrapper.find('button');

    // 模拟点击提交按钮
    button.simulate('click');

    // 断言状态是否更新为 true
    expect(wrapper.find('p').text()).toEqual('Form submitted!');
  });
});

遇到的问题及解决方法

问题:在使用 Jest 和 Enzyme 进行测试时,发现状态更新没有按预期进行。

原因

  1. 模拟事件不正确:可能是因为模拟事件的方式不正确,导致组件没有正确触发状态更新。
  2. 异步问题:状态更新可能是异步的,测试代码没有正确处理异步行为。

解决方法

  1. 正确模拟事件:确保使用 simulate 方法正确模拟事件。
  2. 处理异步行为:使用 Jest 的 asyncawait 处理异步行为,或者使用 done 回调。
代码语言:txt
复制
// Form.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Form from './Form';

describe('Form component', () => {
  it('should update state to isSubmitted true after submit', async () => {
    const wrapper = shallow(<Form />);
    const button = wrapper.find('button');

    // 模拟点击提交按钮
    button.simulate('click');

    // 等待状态更新
    await new Promise(resolve => setTimeout(resolve, 0));

    // 断言状态是否更新为 true
    expect(wrapper.find('p').text()).toEqual('Form submitted!');
  });
});

参考链接

通过以上步骤,你可以有效地使用 Jest 和 Enzyme 来测试 React 组件的状态更新行为。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 测试系列实战(一):使用 Jest Enzyme 测试 React 组件

本篇教程是 JavaScript 测试系列实战 第一篇教程,首先介绍了测试类型,然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试,然后使用 Enzyme 对 React 组件进行浅层渲染...E2E 测试重点是在我们正在运行应用程序中模拟实际用户(例如模拟滚动、单击键入等行为),并检查我们应用程序是否从实际用户角度运行良好。...Jest 测试文件中使用它。...Enzyme 浅层渲染组件还包括其他测试方法,可参考 https://enzymejs.github.io/enzyme/docs/api/shallow.html。...配置 jest-enzyme 你应该还记得,在刚才测试代码中,我们还是使用Jest 自带 Matcher(toEqual)。

3K10
  • 干货 | 携程租车React Native单元测试实践

    一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest Jest是FaceBook出品前端测试框架,适合用于ReactReact...1.2 Enzyme Enzyme是AirBnb开源React测试工具库,通过一套简洁api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过Jest相互配合可以提供完整...快照将在测试文件的当前文件路径自动生成snapshots文件夹中保存。当主动修改造成ui变化时,使用jest -u来更新快照。...七、Jest 异步测试 Jest单元测试是同步,因此面对异步操作如fetch获取数据,需要进行异步模拟测试。..._onClear).toBeCalled();//测试组件实例上方法是否被调用 九、Redux测试使用React或者React Native时通常会使用Redux进行状态管理,需要mock store

    6.1K30

    JavaScript 测试教程–part 3:测试 props,挂载函数快照测试

    JavaScript测试教程–part 4:模拟 API 调用模拟 React 组件交互 在上一篇教程中,我介绍了使用 Enzyme 测试 React 组件基础知识。...所以上面的测试失败了,你需要了解“浅渲染”局限性。 Mount 模拟了 DOM 实现,而 Jest 默认使用 jsdom。...正是由于这个事实,使用 mount 函数能够测试这些组件是否可以协同工作,而不仅仅是单独单元测试。 要弄清楚单元测试集成测试区别,请参见本教程第一部分。...在测试期间,将渲染组件并创建其快照。它包含渲染组件整个结构,应该与测试本身一起提交给存储库。再次运行快照测试时,新快照将与旧进行比较。如果它们不同,则测试将失败。...你还可以在 watch 模式下运行 Jest,这能够允许你一个接一个地更新所有有冲突快照。

    1.7K20

    JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

    在这篇教程中,我们将学习如何测试更复杂组件,包括用 Mock 去编写涉及外部 API 测试,以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们应用程序通常需要从外部...在编写测试时,外部 API 可能由于各种原因而失败。我们希望我们测试是可靠独立,而最常见解决方案就是 Mock。...更新快照文件反映了我们刚刚做变化: // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ToDoList component when provided...我们将测试状态是否随着我们新任务而更新,其中比较有趣是请求是异步,我们继续修改代码如下: import React from 'react'; import { shallow } from 'enzyme...由于没有发起实际 post 请求,我们测试可以更可靠,更快。除此之外,我们还在整个 React 组件中模拟了事件。我们检查了它是否产生了预期结果,例如组件请求或状态变化。

    4.8K20

    那些年错过React组件单元测试(上)

    技术方案 针对项目本身使用是React + Dva + Antd技术栈,单元测试我们用Jest + Enzyme结合方式。...Jest特点: 零配置 快照 隔离 优秀 api 快速且安全 代码覆盖率 轻松模拟 优秀报错信息 Enzyme Enzyme是Airbnb开源React测试工具库,提供了一套简洁强大API,并内置...如果React版本是15或者16,需要安装对应enzyme-adapter-react-15enzyme-adapter-react-16并配置。...如果代码中使用了Promise,则可以通过返回Promise来处理异步代码,jest会等该promise状态转为resolve时才会结束,如果promise被reject了,则该测试用例不通过。...这个快照文件包含渲染组件整个结构,并且应该与测试文件本身一起提交到代码库。

    5K20

    如何自动化测试 React Native 项目 (下篇) - 单元测试

    单元测试工具 - Jest & Enzyme Jest - Facebook Jest 是 Facebook 开源 Javascript 测试框架,提供了许多好用 API,先介绍下主要优点: 自带...Jest Snapshot Test特点: Jest 使用一个 test renderer 来生成出 React tree 序列化结构树。...Jest snapshot 测试不仅可以对比React tree结构区别, 也可以对比其他可序列化区别。 比如对比Redux某个状态state是否之前相同。...在交互测试中,我们主要利用 simulate() API模拟事件,来判断这个元素 prop 上特定函数是否被调用, 传参是否正确, 以及组件状态是否发生意料之中修改。...在最近 enzyme 版本更新, shallowWrapper component lifecycle 函数也会被正确调用。因此对组件状态测试是比较容易

    3.3K21

    年轻时,我不写单元测试

    ,关于不同测试框架重点,这篇文章就不详细展开了,最终结合我们项目,最终采用了facebookjest+enzyme。...shapshot就是会对组件进行一次快照记录当前状态,每一次run jest时候,对比上一次,看看是否有变化。...但是仔细想想,这其实就违背了我们单元测试初衷,笔者这里也大胆猜测下,jest官方在实现这个功能时候,应该也只是想记录下一步一步事件,当前组件html结构,对比上一次快照,来看功能是否符合预期...一开始我觉得单元测试很鸡肋原因也是没有深入了解它,这次发现就算是业务结合很紧密组件,也能够模拟正常操作,这里就贴一个redux结合组件来举例 import React from 'react...那其实整个流程就是初始化这个组件,看看渲染html结构是否符合预期,然后点击下拉框,选中其中第一个,发起请求,拉回详细数据,再观察组件是否展示正常,编写完测试用例,就已经用代码模拟了整个手工操作,怎么样

    86920

    JavaScript测试教程-part 2:引入 Enzyme测试 React 组件

    JavaScript测试教程–part 4:模拟 API 调用模拟 React 组件交互 在本教程第一篇中,我们简要介绍了单元测试基础。这次要更进一步,使用 Enzyme测试 React。...这样可以使你程序将更加可靠,并且更加容易避免回归。我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha Chai 之类库一起使用。...这里要注意一个非常重要点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。由于我们用是 expect 函数,因此可以使用各种可供调用匹配器函数。我已经在课程第一部分中提到了它们。...要将其与 Jest 一起使用,请安装 jest-enzyme 包。 1npm install jest-enzyme 最后要做是将其导入 setupTests 文件中。...在编写单元测试时,它工作得很好。在本教程后续部分中,我将介绍其他类型渲染,并学习如何测试程序不同部分。它将包括快照测试模拟数据之类技术。下次见!

    1.4K50

    Jest来给React完成一次妙不可言~单元测试

    它只查看实现本身,也就是说,您递增递减方法执行之后,应用状态是否正确。这就是代码损坏,测试也会通过。...这里,我们创建了自己助手函数 renderWithRedux() 来呈现组件,因为它将被多次使用。 renderWithRedux() 作为参数接收要呈现组件、初始状态存储。...测试计数器增减是否正确: 为了测试递增递减事件,我们将初始状态作为第二个参数传递给renderWithRedux()。现在,我们可以单击按钮并测试预期结果是否符合条件。...为此,我们必须在jest.mock('axios')帮助下模拟axios请求。 现在,我们可以使用axiosMock并对其应用get()方法。...最后,我们将使用Jest函数mockResolvedValueOnce()来传递模拟数据作为参数。 现在,对于第二个测试,我们可以单击按钮来获取数据并使用async/await来解析它。

    14.9K33

    React + Redux Testing Library 单元测试

    如果你想随时整理重构代码,那么你需要写单元测试; 如果你想有自动化测试套件来帮你快速验证提交完整性,那么你需要写单元测试。 这个结论对我们写不写单元测试有什么影响呢?...MVC Flux 最大不同就是查询更新分离。在 MVC 中,Model 同时可以被 Controller 更新并且被 View 所查询。...如何对 Redux 进行单元测试 得益于 Redux 能够将 React 应用共享状态进行隔离,我们代码也因此变得更加结构化且易于维护,Redux 中 reducer、action selector...}); React 组件 Redux store 交互 前面我们讲完了 Redux 单元测试所需要基本知识,而 React 组件需要从 Redux store 读取状态或者是发送 action...然后我们就可以使用 Jest 模拟一个 action 行为再传给 store,而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。

    2.4K10

    Jest:给你 React 项目加上单元测试

    Jest 是一款轻量 JavaScript 测试框架,它卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 为什么需要单元测试?...单元测试(Unit Testing),指的是对程序中模块(最小单位)进行检查验证。比如一个函数、一个类、一个组件,它们都是模块。 使用单元测试优点: 更好地交付高质量代码。...Jest 基本使用 我们先写一个简单函数,作为被测试模块。...React Testing Library 是 以用户为角度 测试库,能够模拟浏览器 DOM,将 React 组件挂载上去,我们使用其提供一些模拟用户操作 API 进行测试。...官方只支持到 React 16,Enzyme 已死: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl 使用 Jest 测试 React 组件

    2.9K20

    从echarts-for-react源码中学习如何写单元测试

    () 作用: 把遇到计时器挂起,在必要时,再使用jest.runOnlyPendingTimers执行掉已经挂起计时器 这里使用jest.useFakeTimers()目的就是暂停正在执行timer...测试用例 import React from 'react'; //enzyme库用来判断、操纵遍历 ReactComponents import {mount} from 'enzyme'; import...=> { // mount()借助jsdom模拟浏览器环境,并提供DOM api生命周期支持,方便测试HOC(高阶组件) // shallow()浅渲染,将组件渲染成虚拟DOM对象,...enzyme.mount()生成完整React组件 ② mount()/shallow()/render()区别如下: [1] mount()借助jsdom模拟浏览器环境,并提供DOM api生命周期支持.../docs/api/mount.html 通过本文,你应该知道 ① jest.useFakeTimers()作用及何时使用 ② 如何测试function ③ 如何测试ReactComponent ④

    6.2K50

    React Native 持续部署实践— push 代码构建出新版 Growth

    因此在这一篇文章里, 我们将介绍基于下面的几个框架来搭建持续集成: React Native 与持续集成服务器 Travis CI 使用 单元测试 Jest 及 UI 测试框架 React Test...由 Airbnb 推出单元测试工具,主要用来测试一些行为 运行完测试,会向 Coveralls 提交测试覆盖率,还会获得一份 Code Climate 『代码质量分析』分数(4.0 是满分~~)...配置 Android 环境时候,会遇到 LICENSE 没有输入 Y 问题,可以见 before_deploy 字段 单元测试Jest + Enzyme 对于测试来说,尽管框架上发生了一些变化,...,就需要配置 enzyme使用: it('test click book', () => { const spy = jest.spyOn(SkillDetailView, 'openPage...enzyme模拟用户操作,并做一些断言。

    2.1K50

    使用storybook管理React组件

    测试UI组件 4.1 写测试用例原因 找到bug 新修改没有改变已有的接口功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...4.3 测试交互 storybook交互性测试可以使用 Enzyme模拟用户输入,然后使用Mocha or Jest来进行结果测试,storybook又一个专门插件帮助我们集成他们:specifications...通过断言来测试UI组件属性,更多使用方法可以参考specifications插件使用。...4.4 测试样式 样式测试这里采用Puppeteer Jest来实现,其原理是利用Puppeteer无头chrome浏览器storybookurl绑定组件特点,来渲染不同UI组件,再进行图片快照对比...PS:测试不通过时,运行npm run jest:integration将强制更新原有快照。

    3.4K20

    前端测试体系建设与最佳实践总结

    因为我们项目使用是 React 技术栈,这里主要介绍 React 项目的技术选型使用。 单元测试 ? Mocha 是生态最好,使用最广泛单测框架,但是他需要较多配置来实现它高扩展性。...Augular 默认测试框架就是 Karma + Jasmine,而 React 默认测试框架是 Jest. Jest 被各种 React 应用推荐使用。...e2e,并与 src 同放在根目录下 VScode WebStorm 都有对应 Jest 插件,安装书写代码时有代码补全,debug 自动运行等功能 如何编写测试 其实,Jest 语法蛮简单...connect 包裹高阶组件 尽管理论上 components 里面的公共组件都应该是无状态组件,但是有时候有些公用组件写成有状态组件可能更容易被使用,开发成本更低。...只有单元测试 UI 测试会计算到测试覆盖率,而 e2e 不会被计算进去。e2e 不需要写太多,因为大部分关键逻辑已经被单元测试覆盖,e2e 只需要简单进行主流程模拟

    5.4K30

    【React总结(三)】React 组件自动化测试与持续集成指北(1)

    技术选型 为了解决上面的问题,我们自然就会想到,其实我们需要一个自动化测试,我们在项目中选型是这样Jest: Jest是一个令人愉快 JavaScript 测试框架,专注于简单性。...enzyme: Enzyme 是 React JavaScript 测试实用程序,可以更轻松地测试 React Components 输出。...把这个 __snapshots__ 文件夹提交到你代码仓库,如果组件有更新时候,只需要跑 test 命令时候带上-updateSnapshot 选项即可。...3、模拟事件触发来测试组件 通过 snapshot 测试 props 测试,已经能确保组件是可以正常渲染了,但是这还远远不够,因为有很多分支代码我们是没有覆盖到,如果你查看 jest --coverage...首先先测试当前 state 表现是否正常 然后通过模拟事件 ➡️触发组件内 state 发生变化 ➡️检查 state 变化是否正常渲染出期待内容。

    2.4K80

    React 测试驱动开发:从用户故事到产品

    同时,我们将在 TDD 中使用 Jest Enzyme 。...一旦完成本教程,你将能够: 基于需求创建 epic user stories(用户故事) 基于用户故事创建测试 使用 TDD 开发一个 React 应用 使用 Enzyme Jest 测试 React...应用 使用/复用 CSS variables 实现响应式设计 创建一个根据所提供 props 实现不同渲染功能可复用 React 组件 使用 React PropTypes 实现组件 props...现在,将 Jest Enzyme 加入依赖: $ npm i -D enzyme $ npm i -D react-test-renderer enzyme-adapter-react-16 同时...下一步,添加更多测试用例以检查每个方法被调用后组件状态: it('点击 Start 按钮状态 isOn 应变为 true', () => { container.instance().forceUpdate

    3.3K30

    【译】使用EnzymeReact Testing Library测试React Hooks

    我们将介绍使用EnzymeReact Testing Library编写测试,这两个库都能做到这一点。...如果你第一次使用Enzyme,我们之前发布过关于它文章,《Enzyme如何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...我们使用断言,在进一步模拟单击事件之前,输入“修复失败测试”,该事件应该将新项目添加到待办事项列表中。 最后,断言列表中有三个项,并且第三个项与我们创建项相等。...为了模拟添加新待办项单击事件,我们使用fireEvent.click()方法并传入getByText()方法,该方法返回是文本与我们传参数匹配节点。...根据官方文档,React取决于钩子调用关联状态相应useState调用顺序。这段代码打乱了顺序,因为钩子只有在条件为true时才会被调用。 这也适用于useEffect其他钩子。

    4.1K30
    领券