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

如何在Jest/Enzyme上测试子组件

在Jest/Enzyme上测试子组件的方法如下:

  1. 首先,确保已经安装了Jest和Enzyme,并且已经配置好了测试环境。
  2. 创建一个测试文件,命名为Component.test.js,并在文件中导入需要测试的组件和Enzyme相关的方法。
  3. 在测试文件中,使用describe函数创建一个测试套件,描述要测试的子组件。
  4. 在测试套件中,使用it函数创建一个测试用例,描述要测试的子组件的某个功能。
  5. 在测试用例中,使用mount函数将子组件渲染到虚拟DOM中。
  6. 使用Enzyme提供的方法,如findsimulate等,对子组件进行操作和断言。
  7. 使用Jest提供的断言方法,如expect,对子组件的状态、属性、渲染结果等进行断言。
  8. 运行测试命令,查看测试结果。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';
import { mount } from 'enzyme';
import ChildComponent from './ChildComponent';

describe('ChildComponent', () => {
  it('should render correctly', () => {
    const wrapper = mount(<ChildComponent />);
    // 断言子组件是否正确渲染
    expect(wrapper.find('.child').exists()).toBe(true);
  });

  it('should handle click event', () => {
    const wrapper = mount(<ChildComponent />);
    // 模拟点击事件
    wrapper.find('.button').simulate('click');
    // 断言点击事件是否触发
    expect(wrapper.state('clicked')).toBe(true);
  });
});

在上述示例中,我们测试了一个名为ChildComponent的子组件。第一个测试用例检查子组件是否正确渲染,第二个测试用例检查点击事件是否能够正确触发。

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

相关·内容

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

本篇教程是 JavaScript 测试系列实战 的第一篇教程,首先介绍了测试的类型,然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试,然后使用 Enzyme 对 React 组件进行浅层渲染...编写第一个单元测试 编写一个单元测试实际要比你想象得简单很多。...它允许我们在运行测试时,只渲染父组件而不渲染其所有的组件。浅层渲染十分快速,因此非常适合单元测试。...配置 jest-enzyme 你应该还记得,在刚才的测试代码中,我们还是使用了 Jest 自带的 Matcher(toEqual)。...但实际,社区还提供了更好的选择——专门为 Enzyme 定制的 Matcher 库:enzyme-matchers。这些 Matcher 使得编写断言语句更轻松、更具可读性。

3K10

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

1.2 Enzyme Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(点击,触摸),通过和Jest相互配合可以提供完整的...七、Jest 异步测试 Jest单元测试是同步的,因此面对异步操作fetch获取数据,需要进行异步的模拟测试。...组件测试 import { mount, shallow, render } from ‘enzyme'; Enzyme测试组件进行渲染分为三种: shallow:浅渲染,仅渲染单个组件,不包括其组件...这对于隔离组件进行纯单元测试很有用,效率高,可以进行模拟交互,并且从Enzyme 3开始也可以访问组件生命周期,所以一般组件测试用shallow即可。 mount:完整渲染,包括其组件。..._onClear).toBeCalled();//测试组件实例的方法是否被调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态的管理,需要mock store

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

    不会渲染内部组件,也无法与组件互动 // render()用于将React组件渲染成静态的HTML并分析生成的HTML结构 // 渲染一个react组件 const component...DOM对象,它不会渲染内部组件,也无法与组件互动 [3] render()用于将React组件渲染成静态的HTML并分析生成的HTML结构 ③ toEqual()和toBe()的区别 [1]...,也就是ref属性 如何测试组件的props 测试用例 test('component props', () => { // jest.fn()建立 mock function /.../enzyme/docs/api/mount.html 通过本文,你应该知道 ① jest.useFakeTimers()的作用及何时使用 ② 如何测试function ③ 如何测试ReactComponent...④ mount()/shallow()/render()的区别 ⑤ toEqual()和toBe()的区别 ⑥ 如何测试DOM节点的属性 ⑦ 如何测试React组件实例的属性 ⑧ 如何测试组件

    6.2K50

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

    JavaScript测试教程-part 1:用 Jest 进行单元测试 2. JavaScript测试教程–part 2:引入 Enzyme测试 React 组件 3....我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。 Enzyme 基础 Enzyme 是一个库,用于在测试时处理你的 React 组件。...设置 Enzyme 继续一篇文章的内容,假设你 Jest 已经能够工作了。如果还没有,请随时查看课程的一部分。...浅渲染 Enzyme 库的最基本用法是浅渲染。它允许你仅渲染父组件。“浅渲染”不但速度更快,而且非常适合单元测试。这样,你就不比测试传递给 shallow 函数的其他组件。...之所以这样称呼,是因为它不渲染任何组件。在编写单元测试时,它工作得很好。在本教程的后续部分中,我将介绍其他类型的渲染,并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见!

    1.4K50

    【译】使用Enzyme和React Testing Library测试React Hooks

    如果你第一次使用Enzyme,我们之前发布过关于它的文章,《Enzyme何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...tests 的文件夹,并创建一个文件,你可以在其中编写待办事项组件测试。...这四个测试的源代码可以在GitHub找到。...这应该使待办事项节点的长度等于1。 这些测试也可以在GitHub找到。 语法检查 当使用hooks时,有两个语法检查规则要遵守: 规则1:在顶层调用钩子 ...循环或嵌套函数,而不是内部条件。...规则2:从React功能组件调用钩子 钩子用于React的功能组件,而不是React的类组件或JavaScript函数。 当谈到语法检查,我们基本涵盖了所有不应该做的情况。

    4.1K30

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

    单元测试工具 - Jest & Enzyme Jest - Facebook Jest 是 Facebook 开源的 Javascript 测试框架,提供了许多好用的 API,先介绍下主要的优点: 自带...这种方法的特点是只 render 当前组件中一层深的元素, 不会去渲染当前组件中用到的组件。 这就保证了测当前组件的时候, 不会受到组件行为的影响。符合分层测试的需求;并且也比较快速。...需要渲染更深层次的组件时也可以用 enzyme 提供的dive方法来实现。...对测试来说, 我们永远应该把注意力放在自己team写的代码, 因此可以足够安全的认为当生成的 snapshot 正确时,组件的UI渲染也是正确的。...实际应用时,我们用了 jest 的 shallow 方法来生成测试组件的wrapper; 用 enzyme-to-json/serializer 这个 lib 把生成的 shallowWrapper 转化成

    3.3K21

    写代码无BUG,网易云前端单元测试方案总结

    mocha jasmine mocha 是一个经典的测试框架(Test Framework),测试框架提供了一个单元测试的骨架,可以将不同功能分成多个文件,也可以对一个子模块的不同功能再进行不同的功能测试...使用 Jest + Enzyme 对 React 进行单元测试 ?...enzyme Enzyme基础配置如下: npm install enzyme enzyme-adapter-react-16 jest-enzyme jest-environment-enzyme jest-canvas-mock...总结 如果让我推荐的话,对于真实浏览器我会推荐 Karma + Jasmine 方案测试,对于 React 测试 Jest + Enzyme 在 JSDOM 环境下已经能覆盖大部分场景。...另外测试 React组件除了 Enzyme 提供的操作, Jest 中还有很多其他有用的特性,比如可以 mock 一个 npm 组件的实现,调整 setTimeout 时钟等,真正进行单元测试时,这些工具也是必不可少的

    9.6K20

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

    Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 为什么需要单元测试?...但 Jest 本身并不支持 React 组件测试 API,需要使用另外一个内置的 React Testing Library 库来测试 React 组件。...另一种比较流行的测试 React 组件的框架是 Enzyme,它的 API 简洁优雅,能够用类似 JQuery 的语法,对开发非常友好。...官方只支持到 React 16,Enzyme 已死: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl 使用 Jest 测试 React 组件...Document expect(BtnElement).toBeInTheDocument(); }); 测试 Button 的 onClick 能否正常触发: test('Button click

    2.9K20

    Unit Testing

    #应该测试你的程序 其实每一个项目都应该使用单元测试,单元测试可以很好的保证你的代码不会欺骗你。 世界没有任何一个完美的程序,也更不会有完美的人可以写出没有任何问题的代码。...'] } /__mocks__/enzymeMock.js 文件代码 import Enzyme from 'enzyme' import Adapter from 'enzyme-adapter-react...-16' Enzyme.configure({ adapter: new Adapter() }) 其他配置可以参考官网的配置文档来进行进一步的配置 #如何做好单元测试 #一个好的单元测试应该遵循下面三个步骤...但是如果你将所有的代码都写了单元测试,那么我觉得你是把全身的安全带都绑上了,只露了一只眼睛,你的开发工作将举步难行,下面来说说单元测试应该覆盖哪些,不应该覆盖哪些 组件类型/测试内容 分支渲染逻辑 事件调用...纯 UI 展示型组件 ✅ ✅ ❌ 容器型组件 ✅ ✅ ❌ 通用 UI 组件 ✅ ✅ ❌ 功能型组件 ✅ ✅ ❌ 总结一句话就是,所有的功能型代码,都需要进行单元测试,但是像 UI 以及 css 等样式代码

    1.3K20

    使用storybook管理React组件

    测试UI组件 4.1 写测试用例的原因 找到bug 新修改没有改变已有的接口和功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...结构文档(类似于html源码),可以无痛集成到组件测试中。...4.3 测试交互 storybook交互性测试可以使用 Enzyme来模拟用户输入,然后使用Mocha or Jest来进行结果测试,storybook又一个专门的插件帮助我们集成他们:specifications...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现,其原理是利用Puppeteer的无头的chrome浏览器和storybook的url绑定组件特点,来渲染不同的UI组件,再进行图片快照的对比...://localhost:9009 jest:integration", 第一次运行npm run test:integration可以生成UI组件渲染的一次快照,再次运行会将新旧快照进行对比,只有完全一致才能测试通过

    3.3K20

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

    在之前的两篇教程中,我们学会了如何去测试最简单的 React 组件。在实际开发中,我们的组件经常需要从外部 API 获取数据,并且组件的交互逻辑也往往更复杂。...在这篇教程中,我们将学习如何测试更复杂的组件,包括用 Mock 去编写涉及外部 API 的测试,以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们的应用程序通常需要从外部的...打开 TodoList 的测试文件,首先在最前面通过 jest.mock 配置 axios 模块的 Mock(确保要在 import TodoList 之前),在 Mock 之后,无论在测试还是组件中使用的都将是...const toDoListInstance = shallow(); expect(getSpy).toBeCalled(); }); }); }); 测试模块中一个函数是否被调用实际是比较困难的...如果你忘记了 Jest Matcher 的含义,推荐阅读本系列的第一篇教程。 迭代 TodoList 组件 一个实际的项目总会不断迭代,当然也包括我们的 TodoList 组件

    4.8K20

    Sentry 的前端测试实践:从 Enzyme 迁移到 RTL

    执行 Enzyme 测试通常需要很长时间,特别是如果你忘记在测试案例之间进行手动清理。上图是对单个组件Jest 测试结果。由于每个测试案例执行后缺少清理操作,每个测试的执行时间都会变长。...在我们的 TSC 会议,团队成员经常会提到 RTL。通常,当有人需要修改组件的内部状态或样式,并发现还需要更新 Enzyme 测试(特别是快照)时,就会提到 RTL。...我们需要把这一辈都花在转换这些文件吗?我们需要了解这实际上将涉及多大的工作量,以便与我们的主要职责——Sentry 的开发做出协调。...在大型组件使用 getByRole 时性能较差 根据 RTL 的指南,测试应该像用户与组件交互的方式一样。...www.infoq.cn/article/1b1xze82HfsSd168M2k7 ) JavaScript 测试系列实战(一):使用 JestEnzyme 测试 React 组件 (https:

    60410

    在 ts + Jest 单元测试中 debugging

    温馨提示:因微信中外链都无法点击,请通过文末的 “阅读原文” 到技术博客中完整查阅版; 本文简要介绍了如何在 Jest 单元测试中利用 Chrome Node DevTools 来辅助调试 1、背景 代码是...Chrome Node DevTools 刚开始我用 VSCode 的 Debugger 功能,在 TS 源码进行 debugger 时候,发现在源码打断点无法准确定位: ?...,而非通过创建的进程的工作池来运行测试。...Jest运行测试用例的特点是多进程并发运行不同测试案例,达到快速的效果。但是这样对调试来说是没法进行的。这个参数保证了使用一个进程运行所有代码。 接下来就可以开心的 debug 了: ?...Code:文中给出针对 ts + jest 的 launch.json 的配置项,可以借鉴一下 使用jest+enzyme进行react项目测试 - debug篇:虽说是 2017 年的文章,仍旧有可借鉴性

    4K30

    那些年错过的React组件单元测试

    因此单元测试的概念在前端领域应运而生,通过编写单元测试可以确保得到预期的结果,提高代码的可读性,如果依赖的组件有修改,受影响的组件也能在测试中及时发现错误。 测试类型又有哪些呢?...Jest 本篇文章我们着重来介绍一下Jest,也是我们整个React单元测试的根基。 环境搭建 安装 安装JestEnzyme。...但这里我们思考一种场景:如果使用done来测试回调函数(包含定时器场景,setTimeout),由于定时器我们设置了 一定的延时( 3s)后执行,等待 3s 后会发现测试通过了。...实际jest.spyOn()是jest.fn()的语法糖,它创建了一个和被spy的函数具有相同内部代码的mock函数。 Snapshot 快照测试 所谓snapshot,即快照也。...总结 到这里,关于前端单元测试的一些基础背景和Jest的基础api就介绍完了,在下一篇文章中,我会结合项目中的一个React组件来讲解如何做组件单元测试。 ?

    5K20

    使用Enzyme测试React(Native)组件|洞见

    对于最底层的组件来说,我们可以很容易的将其进行渲染并测试其逻辑正确与否,但对于较上层的父组件来说,就需要对其所包含的所有组件都进行预先渲染,甚至于最上面的组件需要渲染出整个 UI 页面的真实DOM节点才能对其进行测试...Enzyme理论应该与所有TestRunner和断言库相兼容,已经集成了多种测试类库,比如Jest、Mocha&Chai、Jasmine,不过这些不是我们今天的重点。...,可以确保你的测试不会去间接断言组件的行为。...在这个对象的基础,at方法则可以返回指定位置的组件,simulate方法可以在这个组件模拟触发某种行为。...总结 一期技术雷达中指出:我们非常享受Enzyme为React.js应用提供的快速组件级UI测试功能。

    2.4K40

    React + Redux Testing Library 单元测试

    对于最底层的组件来说,我们可以很容易得将其进行渲染并测试其逻辑的正确与否,但对于较上层的父组件来说,通常来说就需要对其所包含的所有组件都进行预先渲染,甚至于最上面的组件需要渲染出整个 UI 页面的真实...在单元测试中,通常我们希望将重点放在作为独立单元进行测试组件,并避免间接断言其组件的行为。...此外,对于包含许多子组件组件,整个 render 树会变得非常之大,而反复 render 所有的组件可能会减慢单元测试的速度。...,可以确保你的测试不会去间接断言组件的行为。...,但只会渲染出组件的第一层 DOM 结构,其嵌套的组件不会被渲染出来,从而使得渲染的效率更高,单元测试的速度也会更快。

    2.3K10

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

    Facebook 推出的单元测试框架,带有 mock 功能 react-test-render。用来保存一次的 UI 的 snapshot enzyme。...:Jest + Enzyme 对于测试来说,尽管框架上发生了一些变化,但是它仍然离开不了 equal、mock、stub 这些基本的用法。...https://www.phodal.com/'); expect(spy).toBeCalledWith('https://www.phodal.com/'); }); 唯一比较麻烦的是,当我们要测试原生的组件...', () => ({ getVersion: jest.fn(),})); 而 React Test Render 的用法就稍微简单一些,主要用来测试一些组件的渲染结果: it('renders...总的来说,React Native 有一些测试还是不容易写的。并且诸如 WebView 这样的组件,在测试的时候会报错~~。

    2.1K50
    领券