📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. Node 自带 assert 断言模块
  • 2. Jest 中的全局变量
  • 2.1 Expect
  • 3. Jest 和 Enzyme 的关系
  • 4. Enzyme 中的 mount, shallow 和 render 的区别
  • 4.1 shallow 测试
  • 4.2 mount 测试
  • 4.2 render 测试
  • 参考资料

Was this helpful?

  1. 测试

初识代码测试

1. Node 自带 assert 断言模块

assert 模块提供了一系列的断言方法用于校验变量,这个模块推荐使用 strict mode, 但同时也有一些宽松的模式

const assert = require('assert');

const a = {
  foo: 1,
  bar: 2
}

const b = {
  foo: 1,
  bar: 2,
  baz: 3
}

// 当 a b 内容相同时,不会有任何输出
// 内容不相同时,会报错,错误信息是第三个参数
assert.deepEqual(a, b, `error, expected ${JSON.stringify(a)} but got ${JSON.stringify(b)}`);

包含的方法: 1. assert.deepEqual() 2. assert.equal() 3. assert.notDeepEqual() 4. assert.notEqual() ... 等

2. Jest 中的全局变量

在你的测试文件中,Jest 将这些方法和对象(比如test,describe)放进了全局的环境中。你不需要 require 或者 import 就能使用它们。

例如: 1. afterAll() 2. beforeAll() 3. describe() 4. test() it() 的别名 ... 等

test 和 descript 示例代码:

const myBeverage = {
  delicious: true,
  sour: false,
};

describe('my beverage', () => {
  test('is delicious', () => {
    expect(myBeverage.delicious).toBeTruthy();
  });

  test('is not sour', () => {
    expect(myBeverage.sour).toBeFalsy();
  });
});

疑问: 为啥没有提到 expect?

2.1 Expect

当你在写测试的时候,你经常需要检验某些值是否符合要求。expect 允许你访问一系列的 matches 来对不同的事物进行校验。

2.1.1 expect(value)

expect 函数是用来检验值的,通常不会直接调用 expect 函数,而是,会和一个 matcher 函数一起使用。

示例:

假设 bestLaCroixFlaovr 函数预期是返回 grapefruit,那么你可以这样进行测试:

test('the best flavor is grapefruit', () => {
    expect(bestLaCroixFlaovr()).toBe('grapefruit')
})

在这个例子中, toBe 就是 matcher 函数,为了测试不同类型的数据,这里有很多不同的 matcher 函数。

注意:

expect 函数的参数应该是你的代码生成的值,而 matcher 的参数应该是正确值(被期望的值),如果你搞混了,你的测试依旧可以运行,但是如果有的测试失败了,那么失败的测试的错误信息会看起来很奇怪。

2.1.2 expect.extend(matchers)

通过自定义 matchers,扩展 expect

其余 API 略...

3. Jest 和 Enzyme 的关系

Jest 是 JS 的测试框架, acted as a test runner, assertion libraey, and mocking library

Enzyme 是 JS 针对 React 的测试工具,使得更为容易去断言,操作 React 组件。 Enzyme 提供了一些工具方法,用于渲染组件,查找元素,以及和元素交互

  1. Jest 和 Enzyme 都为了测试 React 应用而特殊设计,但是 Jest 可以用来测试其他 JS 应用,但是 Enzyme 只能用于 React

  2. Jest 不用 Enzyme,也可以实现渲染组件,snapshots 测试等功能,Enzyme 只是添加了一些额外的功能

  3. Enzyme 可以单独使用不配合 Jest, 但是这样的话必须要有另外一个 test runner

4. Enzyme 中的 mount, shallow 和 render 的区别

  1. shallow 方法对应 Shallow Rendering

  2. mount 方法对应 Full Rendering

  3. render 方法对应 Static Rendering

公共 jsx 代码

function Child() {
  return <div>child</div>
}

function App() {
  return (
    <div className="App">
    <Child/> 
      <header className="App-header">
       Parent
      </header>
    </div>
  );
}

4.1 shallow 测试

快照结果

<div
  className="App"
>
  <_default />  // 有 default 标签,没有渲染结果
  <header
    className="App-header"
  >
    Parent
  </header>
</div>

即不关心子组件的渲染内容

4.2 mount 测试

mount 快照结果

<App>
  <div
    className="App"
  >
    <_default>  // 有 default 标签, 有渲染结果
      <div>
        child
      </div>
    </_default>
    <header
      className="App-header"
    >
      Parent
    </header>
  </div>
</App>

即会渲染出子组件的内容

mount 本身使用 jsdom 来支持渲染,不像 shallow 或者 static rendering, mount 会真正的在 dom 中挂载组件,这意味着不同的测试用例如果使用同一个 DOM 的话会互相影响。因此,在写测试的时候,如果有必要,使用 .unmount 或者其他的方式做清理。

4.2 render 测试

render 快照结果

<div
  class="App"
>
  <div>   // 没有 default 标签,有渲染结果
    child
  </div>
  <header
    class="App-header"
  >
    Parent
  </header>
</div>

即会直接渲染子组件 html,没有了 default 标签。

render 方法 生成的html 结构,内部使用了 Cheerio, 返回的结果是 CheerioWrapper 实例,可以使用 Cheerio 的方法。

参考资料

Previous如何配置 output.libraryNextJest 中 如何测试 setTimeout

Last updated 4 years ago

Was this helpful?

文档
链接
参考文档
Enzyme 文档
文档
文档
Testing React with Jest and Enzyme I
Testing React with Jest and Enzyme II