jest中的mock，jest.fn()、jest.spyOn()、jest.mock()_微个日光日的博客

Mock函数的作用

在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
Mock函数提供的以下三种特性，在我们写测试代码时十分有用：
捕获函数调用情况
设置函数返回值
改变函数的内部实现
1. jest.fn()

jest.fn()是创建Mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。
// functions.test.js
test('测试jest.fn()调用', () => {
  let mockFn = jest.fn();
  let result = mockFn(1, 2, 3);
  // 断言mockFn的执行后返回undefined
  expect(result).toBeUndefined();
  // 断言mockFn被调用
  expect(mockFn).toBeCalled();
  // 断言mockFn被调用了一次
  expect(mockFn).toBeCalledTimes(1);
  // 断言mockFn传入的参数为1, 2, 3
  expect(mockFn).toHaveBeenCalledWith(1, 2, 3);
jest.fn()所创建的Mock函数还可以设置返回值，定义内部实现或返回Promise对象。 
// functions.test.js
test('测试jest.fn()返回固定值', () => {
  let mockFn = jest.fn().mockReturnValue('default');
  // 断言mockFn执行后返回值为default
  expect(mockFn()).toBe('default');
test('测试jest.fn()内部实现', () => {
  let mockFn = jest.fn((num1, num2) => {
    return num1 * num2;
  // 断言mockFn执行后返回100
  expect(mockFn(10, 10)).toBe(100);
test('测试jest.fn()返回Promise', async () => {
  let mockFn = jest.fn().mockResolvedValue('default');
  let result = await mockFn();
  // 断言mockFn通过await关键字执行后返回值为default
  expect(result).toBe('default');
  // 断言mockFn调用后返回的是Promise对象
  expect(Object.prototype.toString.call(mockFn())).toBe("[object Promise]");
上面的代码是jest.fn()提供的几个常用的API和断言语句，下面我们在src/fetch.js文件中写一些被测试代码，以更加接近业务的方式来理解Mock函数的实际应用。 
// fetch.js
import axios from 'axios';
export default {
  async fetchPostsList(callback) {
    return axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
      return callback(res.data);
我们在fetch.js中封装了一个fetchPostsList方法，该方法请求了JSONPlaceholder提供的接口，并通过传入的回调函数返回处理过的返回值。如果我们想测试该接口能够被正常请求，只需要捕获到传入的回调函数能够被正常的调用即可。下面是functions.test.js中的测试的代码。 
import fetch from '../src/fetch.js'
test('fetchPostsList中的回调函数应该能够被调用', async () => {
  expect.assertions(1);
  let mockFn = jest.fn();
  await fetch.fetchPostsList(mockFn);
  // 断言mockFn被调用
  expect(mockFn).toBeCalled();
2. jest.mock()
 
fetch.js文件夹中封装的请求方法可能我们在其他模块被调用的时候，并不需要进行实际的请求（请求方法已经通过单侧或需要该方法返回非真实数据）。此时，使用jest.mock(）去mock整个模块是十分有必要的。 
下面我们在src/fetch.js的同级目录下创建一个src/events.js。 
// events.js
import fetch from './fetch';
export default {
  async getPostList() {
    return fetch.fetchPostsList(data => {
      console.log('fetchPostsList be called!');
      // do something
    });
functions.test.js中的测试代码如下： 
// functions.test.js
import events from '../src/events';
import fetch from '../src/fetch';
jest.mock('../src/fetch.js');
test('mock 整个 fetch.js模块', async () => {
  expect.assertions(2);
  await events.getPostList();
  expect(fetch.fetchPostsList).toHaveBeenCalled();
  expect(fetch.fetchPostsList).toHaveBeenCalledTimes(1);
});
在测试代码中我们使用了jest.mock(’…/src/fetch.js’)去mock整个fetch.js模块。如果注释掉这行代码，执行测试脚本时会出现以下报错信息
 从这个报错中，我们可以总结出一个重要的结论： 
在jest中如果想捕获函数的调用情况，则该函数必须被mock或者spy！
3. jest.spyOn()
 
jest.spyOn()方法同样创建一个mock函数，但是该mock函数不仅能够捕获函数的调用情况，还可以正常的执行被spy的函数。实际上，jest.spyOn()是jest.fn()的语法糖，它创建了一个和被spy的函数具有相同内部代码的mock函数。
 上图是之前jest.mock()的示例代码中的正确执行结果的截图，从shell脚本中可以看到console.log(‘fetchPostsList be called!’);这行代码并没有在shell中被打印，这是因为通过jest.mock()后，模块内的方法是不会被jest所实际执行的。这时我们就需要使用jest.spyOn()。 
// functions.test.js
import events from '../src/events';
import fetch from '../src/fetch';
test('使用jest.spyOn()监控fetch.fetchPostsList被正常调用', async() => {
  expect.assertions(2);
  const spyFn = jest.spyOn(fetch, 'fetchPostsList');
  await events.getPostList();
  expect(spyFn).toHaveBeenCalled();
  expect(spyFn).toHaveBeenCalledTimes(1);
执行npm run test后，可以看到shell中的打印信息，说明通过jest.spyOn()，fetchPostsList被正常的执行了。
                    maven有3种生命周期，分别为：1.default2.clean3.sitemaven lifecycle相关的命令1.CLEAN (清理)用于清除之前构建生成的所有文件其中具体为清楚了Target目录中的所有文件，包括该目录i.e：删除了install生成的所有文件2.VALIDATE(验证)用于验证项目是否正确，并且其中有必要信息是否都可用3.COMPILE(编译源代码)编译项目的源代码，主要是java文件一般是编译scr/main/java或是scr/test/java里
				在本篇教程中，我们会介绍 Jest 中的三个与 Mock 函数相关的API，分别是jest.fn()、jest.spyOn()、jest.mock()。使用它们创建Mock函数能够帮助我们更好的测试项目中一些逻辑较复杂的代码，例如测试函数的嵌套调用，回调函数的调用等。
如果你还不知道Jest的基本使用方法，请先阅读: 《使用Jest测试J...
快照测试在你要确保你的UI没有发生改变的时候非常有用。jest的快照测试为文本测试，第一次执行时存储本次的快照，然后在之后的测试过程中进行文本比对。
toMatchSnapshot() 方法
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
  const tree =
 import * as mock from "jest-mock-module" ;
mock . extend ( jest ) ;
jest . spy ( "src/example" ) ;
const example = require ( "src/example" ) ;
// Check module object properties
为什么要使用Mock函数？
在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
Jest 中的三个与 Mock 函数相关的API，分别是jest.fn()、jest.spyOn()、jest.mock().
jest.fn
const myMock = jest.fn(); 
conso
				说到mock，大家第一个想到的肯定是项目里经常用来模拟接口返回值的 mockjs库 ，Jest里的mock有所不同，下面会举一些例子来分别讲一讲 jest.fn()、jest.mock()、jest.spyOn()。
一、jest.fn()
jest.fn() 用于创建一个函数，我们可以设置该函数的返回值、监听该函数的调用、改变函数的内部实现等等，我们通过 jest.fn() 创建的函数有一个特殊的 .mock 属性，该属性保存了每一次调用情况，例子：
test('test jest.fn', () =&g
				我们在使用elementUI的$confirm弹窗时经常用来删除确认,写单测的时候我们并模拟不了用户点了是或否,弹窗是在body外面的,所以使用wrapper.find在组件内也拿不到弹窗中的确定或者取消按钮,模拟真实用户点击就行不通了,单测中也没有document对象查询不了body,所以这里为了执行到点是后面的逻辑,写单测时直接将确定这一步跳过,自己mock掉这个过程,只保留确定后的删除逻辑:
组件中:
this.$confirm('确认删除吗?', '警告', {
        confirm
 如何设置要在Jest中使用的应用程序：
 jest . mock ( 'express' , ( ) => {
  return require ( 'jest-express' ) ;
} ) ;
express.json()
 使用此API的方法：
 expect ( express . json ) . toHaveBeenCalledWith ( [ options ] ) ;
express.static()
 使用此API的方法：
 expect ( express . static ) . 
 import { mock } from 'jest-mock-extended' ;
interface PartyProvider {
   getPartyType : ( ) => string ;
   getSongs : ( type : string ) => str
当开玩笑地运行单元测试用例时，模拟canvas 。 对于更多的浏览器环境，您可以使用来实现实际的浏览器运行时。
这仅应作为开发依赖项（ devDependencies ）安装，因为它仅用于测试。 
npm i --save-dev jest-canvas-mock
在jest下的package.json ，创建一个setupFiles数组，然后将jest-canvas-mock添加到该数组中。 
  " jest " : {
    " setupFiles " : [ " jest-canvas-mock " ]
 如果已经具有setupFiles属性，则还可以将jest-canvas-mock附加到数组。 
  " jest " : {
    " setupFiles " : [ " ./__setups__/other.js " ,
				将此模块与一起使用，以运行依赖于localstorage和/或sessionStorage Web测试，在localstorage测试中，您需要具有localstorage功能的有效LocalStorage API。
 该模块没有运行时依赖项，因此您的项目不会使用此依赖项来引入其他模块依赖项。
开玩笑24+
 请注意，在jest@24及更高版本中，此项目可能会复制功能。
这仅应作为开发依赖项（ devDependencies ）安装，因为它仅用于测试。 该模块通过进行编译，以支持当前的活动Node LTS版本（6.11.3）。
yarn add --dev jest-local
为什么会用到 Mock？ Mock 能帮我们解决什么问题？
在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
Mock函数提供的以下三种特性，在我们写测试代码时十分有用：
- 擦除函数的实际实现（换句话说：改变函数的内部实现）
- 捕获函数调用情况( 包括：这些调用中
问了好些前端大神，回复都说，做好前端测试是个不简单的事情，特别是对于前端UI部分的测试。antd在UI上，可以说做得很好，但是看了他们的相关测试，也没有很完善。.
目前来说，前端测试在service和model层的应用，结合相关资料和自己遇到的坑，给大家分享一下。
(1) jest的版本选择（"jest": "^20.0.0"）：
项目中，用到的 babel等编译工具不是最新版本...