• Enzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断、操纵和历遍 React Components 输出。Enzyme 的 API 通过模仿 jQuery 的 API ,使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库。

  • jest.spyOn : 当需要测试某些必须被完整执行的方法时,常常需要使用jest.spyOn()

    • 1) 如果是箭头函数的定义

      // react 组件中的一部分代码
      test = () => {}

      测试用例中mock此函数 方法如下

      const wrapper = mount(<Component />);
      const spyTest = jest.spyOn(wrapper.instance(), 'test'); // 在mount组件之后
      // mock 完成后可以被调用
      spyTest();
      1. 如果是bind 绑定的函数
      test() {}

      测试用例中mock此函数 方法如下

       const spyTest = jest.spyOn(Component.prototype, 'test'); //在mount组件之前
      mount(<Component />)
      // mock 完成后可以被调用
      spyTest();
  • antd form 设计到必填项时候mock方式如下

    wrapper.find('input#id').simulate('change', {target: {value: 'test'}});

react 项目 测试的更多相关文章

  1. 创建react项目的几种方法

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  2. 创建react项目

    npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...

  3. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  4. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  5. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  6. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  7. DvaJS构建配置React项目与使用

    DvaJS构建配置React项目与使用 一,介绍与需求分析 1.1,介绍 dva 首先是一个基于redux 和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-r ...

  8. React项目使用Redux

    ⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...

  9. react项目使用antd

    在开始实践之前要确保搭建React单页面开发环境,如果还没有搭建好开发环境的朋友请移步到如何搭建React单页面开发环境. 首先在命令行模式下创建一个React项目(项目名使用小写字母命名):(win ...

随机推荐

  1. 源码详解系列(八) ------ 全面讲解HikariCP的使用和源码

    简介 HikariCP 是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,和 dr ...

  2. Csp_J2019游记

    Day_-14 学校开始停课集训,还好还有上午~~ Day_-7 马上半期考试+\(Csp\),心态已炸,却还要坚持集训 Day_-1 \(Csp\)前夕,打算临时抱抱佛脚,死磕了一下图论(诸如最小生 ...

  3. pytorch之 bulid_nn_with_2_method

    import torch import torch.nn.functional as F # replace following class code with an easy sequential ...

  4. React之拆分组件与组件之间的传值

    父子组件传值: 父组件向子组件传值通过向子组件TodoItem进行属性绑定(content={item}.index={index}),代码如下 getTodoItem () { return thi ...

  5. vs code支持 es6, node.js 语法提示

    npm install --save-dev @types/node 安装这个东西就可以了, 代码拷走, 回去愉快的敲代码吧

  6. window.location操作url对象

    URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成:scheme://host:port/path?query#fragment s ...

  7. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  8. git的使用方法大全

    换了一个新的工作环境,由于以前都是使用SVN管理代码,现在要换成git,但我对git了解不多,只好下功夫咯!脑子不灵活,命令语句容易忘,所以做个笔记记录下~~~1.安装git到Git官网下载合适自己电 ...

  9. 5G和AI会碰撞出什么样的火花呢?

    本文学习和分享一篇综述文章,这篇文章是东南大学移动通信国家重点实验室主任.长江学者特聘教授尤肖虎教授2019年发表在<中国科学 信息科学>(<SCIENCE CHINA Inform ...

  10. 前端html,css考点

    1, 内联元素,块级元素相关知识点 参考链接:https://edu.aliyun.com/a/103378 (1)置换元素 概念:浏览器根据元素的标签和属性,来决定元素的具体显示内容.<img ...