前端自动化测试 之 Jest 测试框架应用

// index.js
function ZcyZooTeam(str) {
  return 'Zcy' + str;
}
1.
2.
3.
4.

// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
  throw Error(`ZcyZooTeam 结果应为${value}, 但实际结果为${result}`);
}
1.
2.
3.
4.
5.
6.

// no-jest.js
function expect(result) {
  return {
    // 用于判断是否为期望值
    toBe(value) {
      if(result !== value) {
        throw Error(`结果应为${value}, 但实际结果为${result}`);
      }
      console.log('测试通过！');
    }
  }
}

// 执行测试
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

// no-jest.js
// 再封装如下方法
function test(msg, fn) {
  try {
    fn();
    console.log(msg + '测试通过！');
  } catch (error) {
    console.log(msg + '测试未通过！' + error);
  }
}

test('测试ZcyZooTeam', () => {
  expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

npm i jest --save-D

// 初始化 jest 的配置文件
npx jest --init

// 你将在那个环境进行测试，回车即可选择
// 第一个是 node 环境、第二个是浏览器环境
? Choose the test environment that will be used for testing › - Use arrow-keys. Return to submit.
    node
❯   jsdom (browser-like)

// 是否需要 jest 生成测试覆盖率报告
? Do you want Jest to add coverage reports? › (y/N)

// 是否需要在测试结束后清除模拟调用
? Automatically clear mock calls and instances between every test? › (y/N)

// 创建 jest.config.js 文件
📝  Configuration file created at /Users/zcy1/Desktop/demo/auto-test-jest-demo/jest.config.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

// .babelrc
// 如果想用 es6 的形式导出，需要使用 babel 插件进行转换
// @babel/core  @babel/preset-env

// 创建 .babelrc 文件
// 为了在 node 环境下使用 es6 的导出，需要使用 babel 进行转换
{
  // 设置插件集合
  "presets": [
    // 使用当前插件，可以进行转换
    // 数组的第二项为插件的配置项
    [
      "@babel/preset-env", {
        // 根据 node 的版本号来结合插件对代码进行转换
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

npx jest --coverage
1.

// jest.test.js
test("测试", () => {
  expect(1).toBe(1);  // 通过
  const a = { name: 'Zero' };
  // 因为 a 的引用地址，和 toBe 中对象的引用地址不一致，会导致测试不通过，需要使用其他的匹配器
  expect(a).toBe({ name: 'Zero' });  // 失败
});
1.
2.
3.
4.
5.
6.
7.

// jest.test.js
test('测试对象相等', () => {
  const a = { name: 'Zero' };
  expect(a).toEqual({ name: 'Zero' });  // 断言
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试是否为null', () => {
  const a = null;
  expect(a).toBeNull();
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试是否为undefined', () => {
  const a = undefined;
  expect(a).toBeUndefined();
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试变量是否定义过', () => {
  const a = '';
  expect(a).toBeDefined();
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试变量真值', () => {
  const a = '123';
  expect(a).toBeTruthy();
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试变量假值', () => {
  const a = '';
  expect(a).toBeFalsy();
})
1.
2.
3.
4.
5.

// jest.test.js
test('测试变量不是假值', () => {
  const a = '1';
  expect(a).not.toBeFalsy();
})
1.
2.
3.
4.
5.

// jest.test.js
test('是否大于 a 的数字', () => {
  const a = 123;
  expect(a).toBeGreaterThan(1);
})
1.
2.
3.
4.
5.

// jest.test.js
test('是否小于 a 的数字', () => {
  const a = 0;
  expect(a).toBeLessThan(1);
})
1.
2.
3.
4.
5.

// jest.test.js
test('是否大于等于 a 的数字', () => {
  // toBeLessOrEqual 匹配器，与之相反
  const a = 123;
  expect(a).toBeGreaterThanOrEqual(1);
})
1.
2.
3.
4.
5.
6.

// jest.test.js
test('是否大于等于 a 的数字', () => {
  const a1 = 0.1;
  const a2 = 0.2;
  expect(a1 + a2).toBeCloseTo(0.3);
})
1.
2.
3.
4.
5.
6.

// jest.test.js
test('是否包含 day ', () => {
  const a = 'happy every day';
  expect(a).toMatch('day');
})
1.
2.
3.
4.
5.

// jest.test.js
test('数组中是否包含 zoo 这个元素', () => {
  const a = ['zoo', 'ZooTeam', 'Zero'];
  expect(a).toContain('zoo');
})
1.
2.
3.
4.
5.

// jest.test.js
const error = () => {
  throw new Error('error');
}
test('是否存在异常', () => {
  expect(error).toThrow();
})
1.
2.
3.
4.
5.
6.
7.

// getData.js
export const getData = (fn) => {
  axios.get('/getData').then((res) => {
    fn(res.data);
  })
}
1.
2.
3.
4.
5.
6.

// jest.test.js
// 异步调用回调函数需要添加 done 参数，是一个函数
test('getData 返回结果为 { success: true }', (done) => {
  // 此处代码无效，因为测试用例不会等待请求结束后的回调，测试用例执行完就直接结束了
  // getData1((data) => {
  //   expect(data).toEqual({
  //     success: true
  //   })
  // })
  
  getData1((data) => {
    expect(data).toEqual({
      success: true
    })
    // 需要在结束前调用 done 函数， Jest 会知道到 done 才会结束，才可以正确测试异步函数
    done();
  })
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

// getData.js
export const getData2 = () => {
  return axios.get('http://www.dell-lee.com/react/api/demo.json')
}

// jest.test.js
test('getData 返回结果为 { success: true }', () => {
  // 使用 promise 时需要 return，在 then 中使用 done 也可以
  return getData2().then(res => {
    expect(res.data).toEqual({
      success: true
    })
  })
})

// 测试请求是否 404
test('getData 返回结果为 404', () => {
  // 由于不触发 catch 就不会走测试校验，所以会成功，我们需要做一下限制
  // 这行代码限制下面的代码中必须要执行一次 expect 方法，如果非 404 就不会走下面的 expect，则测试不会通过
  expect.assertions(1);
  // 使用 promise 时需要 return
  // 如果只想测试 404 这样写是有问题的，需要配合 assertions 使用
  return getData2().catch(err => {
    expect(err.toString().indexOf('404') > -1).toBe(true)
  })
})

// 另一种写法
test('getData 返回结果为 { success: true }', () => {
  // 会返回很多数据，其中包含 data 对象
  // getData2().then((res) => console.log(res))
  // {
  //   status: 200,
  //   statusText: 'OK',
  //   headers: {},
  //   ......
  //   data: { success: true }
  // }
  // resolves 方法会将接口返回的字段全部获取，再使用 toMatchObject 方法进行匹配大对象中是否存在 data 对象
  return expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})

// 还可以使用 async/await
test('getData 返回结果为 { success: true }', async () => {
  await expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

// Counter.js
class Counter {
  constructor() {
    this.number = 0;
  }

  add() {
    this.number += 1;
  }

  minus() {
    this.number -= 1;
  }
}

export default Counter;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// jest.test.js
const count = new Counter();
// 使用下方两种测试方法会互相影响，先加一后减一，结果永远是 0
test('测试加法', () => {
  count.add();
  expect(count.number).toBe(1);
})

test('测试减法', () => {
  count.minus();
  expect(count.number).toBe(-1);
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

// jest.test.js
let count = null;
// 类似于生命周期
// 会在测试用例执行前运行
beforeAll(() => {
  console.log('beforeAll')
});

// 会在每个测试用例执行前执行一次，这样就会解决上面互相影响的问题
beforeEach(() => {
  console.log('beforeEach')
  count = new Counter();
});

// 会在每个测试用例执行后执行一次
afterEach(() => {
  console.log('afterEach')
});

// 会在所有测试用例结束后运行
afterAll(() => {
  console.log('afterAll');
});

test('测试加法', () => {
  console.log('add')
  count.add();
  expect(count.number).toBe(1);
})

test('测试减法', () => {
  console.log('minus')
  count.minus();
  expect(count.number).toBe(-1);
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

// jest.test.js
let count = null;
// describe 方法，可以将测试用例进行分组，更加好维护同类型功能的测试用例
describe('count 测试', () => {
  beforeAll(() => {
    console.log('beforeAll')
  });
  beforeEach(() => {
    console.log('beforeEach')
    count = new Counter();
  });
  afterEach(() => {
    console.log('afterEach')
  });
  afterAll(() => {
    console.log('afterAll');
  });
  
  // 将 add 类型进行分组
  describe('测试 add 类型用例', () => {
    // 在 describe 方法中，钩子函数会按照层级嵌套进行执行，先执行外部，再执行内部，不同的 describe 互不干扰
    beforeEach(() => {
      console.log('beforeEach add');
    });
    test('测试加法', () => {
      console.log('add')
      count.add();
      expect(count.number).toBe(1);
    })
  })

  // 将 minus 类型进行分组
  describe('测试 minus 类型用例', () => {
    test('测试减法', () => {
      console.log('minus')
      count.minus();
      expect(count.number).toBe(-1);
    })
  })
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

// mock.js
export const runFn = (fn) => {
  fn(123);
}

// mock.test.js
test('测试 runFn', () => {
  // 通过 jest 的 fn 方法创建一个模拟函数，如果不传参数会默认生成一个函数
  // 1. 通过 func.mock 获取想要的值
  // 2. 可以自定义返回值
  // 3. 改变内部函数的实现，模拟接口请求，不请求代码中的接口
  const func = jest.fn( () => 456 );

  // 还可以使用 mockReturnValueOnce 方法进行控制输出，两种方法都使用时会覆盖 fn 方法中的返回值，支持链式调用
  // 将 Once 去掉与 fn 方法一样，多次会返回相同的值
  func.mockReturnValueOnce('zoo')

  // 返回 this 方法 mockReturnThis
  func.mockReturnThis();

  // 还可以使用 mockImplementation 方法书写函数内部，可以在函数内部写逻辑，与 jest.fn 方法的参数一样，还可以填加 Once
  func.mockImplementation(() => {
    return '123';
  })

  // 执行被测函数
  runFn(func);
  runFn(func);
  
  // console.log(func.mock)
  // 因为被调用了两次，所以长度都是 2
  // {
  //   calls: [ [123], [123] ],  // 每次的调用情况，传递的参数是什么
  //   instances: [ undefined, undefined ],  // 每次调用的 this 指向，被调用了几次
  //   invocationCallOrder: [ 1, 2 ],  // 执行顺序，可能会传入同一个或多个方法中，需要记录一下顺序
  //   results: [  // mock 函数每次执行后的返回值
  //     { type: 'return', value: 456 },
  //     { type: 'return', value: 456 }
  //   ]
  // }

  // 通过 toBeCalled 判断函数是否被调用
  expect(func).toBeCalled();

  // 判断当前函数调用了几次 被调用了两次
  expect(func.mock.calls.length).toBe(2);

  // 判断参数是什么
  expect(func.mock.calls[0]).toEqual([123]);

  // 判断每次调用的时候参数是什么
  expect(func).toBeCalledWith(123);

  // 判断返回值
  expect(func.mock.results[0].value).toBe('zoo');
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

// mocker.test.js
// 使用 mock 方法引用 __mocks__ 下创建的 mock.js
jest.mock("./mock");
// 执行完上面的方法，会直接寻找 __mocks__ 下的getData，而不是正常的请求文件
// 由于 mock 中没有 getCode 方法，最好只 mock 异步函数，同步函数直接测试即可
// 可以不必须创建 __mocks__ 文件夹
import {
  getData,
} from "./mock";

// 需要使用下面的 requireActual 方法来引用非 mock 文件夹下的 getCode
const { getData } = jest.requireActual("./mock");

// 高阶mock
// 此处直接使用 __mocks__ 目录下的 mock 文件中的函数
test("测试 getData", () => {
  return getData().then((data) => {
    expect(eval(data)).toEqual("123");
  });
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

// mock.js
export const timer = (fn) => {
  setTimeout(() => {
    fn();
    setTimeout(() => {
      fn();
    }, 3000)
  }, 3000)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

// mock-timers.test.js
import { timer } from './mock';

// 使用 useFakeTimers 方法告知 Jest 在下面的测试用例，如果用到了定时器异步函数的时候，都是用假的 timers 进行模拟
jest.useFakeTimers();

test('测试 timer', () => {
  const fn = jest.fn();
  timer(fn);

  // 使用 runAllTimers 方法，让定时器立即执行，和 useFakeTimers 配合使用
  jest.runAllTimers();

  // 如果代码中有多个定时器嵌套，只想测试最外层的定时器，则需要使用 runOnlyPendingTimers 方法
  // 这个方法会只执行当前在队列中的函数，可以多次调用
  jest.runOnlyPendingTimers();
  jest.runOnlyPendingTimers();

  // advanceTimersByTime 方法，可以快进时间
  // 因为 timer 中，三秒后只执行了第一层，如果是六秒，则会执行两次 fn
  jest.advanceTimersByTime(3000);
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

// snapshot.js
export const config1 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date()
  }
}

export const config2 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date().getTime()
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// snapshot.test.js
import { config1, config2 } from "./snapshot";

test('测试 config1 返回值', () => {
  // 但如果每次函数修改的时候，当前测试用例也要不断地修改
  // expect(config()).toEqual({
  //   method: 'GET',
  //   url: '/api'
  // });

  // 需要使用快照匹配 toMatchSnapshot 方法
  // 此方法会生成一个 __snapshots__ 目录，下面的文件中，第一次执行中 config 生成的结果会存到快照文件中
  // 快照会根据 test 方法中的描述生成一个映射关系
  // 修改后的 config 的执行结果与快照中的结果不同时会报错，需要更新快照
  // 如果 config 中有的值是每次运行都会变化的，那么每次快照都不会与当前执行相同，除非执行后再更新快照
  // 需要将在 toMatchSnapshot 方法中传递一个参数，设置一下 time 为任意格式的 Date 类型
  expect(config1()).toMatchSnapshot({
    time: expect.any(Date)
  });
})

test('测试 config2 返回值', () => {
  expect(config2()).toMatchSnapshot({
    time: expect.any(Number)
  });
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

// snapshot.test.js
// 需要安装 prettier
test("测试 config2 返回值", () => {
  // toMatchInlineSnapshot 方法，将执行快照放到行内中，会放到 toMatchInlineSnapshot 方法中
  expect(config2()).toMatchInlineSnapshot(
    {
      time: expect.any(Number)
    },
    `
    Object {
      "method": "GET",
      "time": Any<Number>,
      "url": "/api",
    }
  `
  );
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

// dom.js
import $ from 'jquery';
const addDiv = () => {
  // jQuery
  $('body').append('<div/>');
}

export default addDiv;

// dom.test.js
import addDiv from './dom';
import $ from 'jquery';

test('测试 addDiv', () => {
  addDiv();
  addDiv();
  console.log($('body').find('div').length);

  // 测试dom
  expect($('body').find('div').length).toBe(2);
  expect(document.getElementsByTagName('div').length).toBe(2);
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

module.exports = {
  // 检测从哪个目录开始，rootDir 代表根目录
  roots: ["<rootDir>/src"],

  // 代码测试覆盖率通过分析那些文件生成的，!代表不要分析
  collectCoverageFrom: [
    // src 下所有 js jsx ts tsx 后缀的文件
    "src/**/*.{js,jsx,ts,tsx}",

    // src 下所有 .d.ts 后缀的文件
    "!src/**/*.d.ts"
  ],

  // 运行测试之前，我们额外需要准备什么
  setupFiles: ["react-app-polyfill/jsdom"],

  // 当测试环境建立好后，需要做其他事情时可以引入对应的文件
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],

  // 哪些文件会被认为测试文件
  testMatch: [
    // src 下的所有 __tests__ 文件夹中的所有的 js jsx ts tsx 后缀的文件都会被认为是测试文件
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",

    // scr 下的所有一 .test/spec.js/jsx/ts/tsx 后缀的文件都会被认为是测试文件
    "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
  ],

  // 测试运行的环境，会模拟 dom
  testEnvironment: "jsdom",

  // 测试文件中引用一下后缀结尾的文件会使用对应的处理方式
  transform: {
    // 如果引用的是 js jsx mjs cjs ts tsx 后缀的文件会使用 /config/jest/babelTransform.js 文件进行处理
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",

    // 如果引用的是 css 后缀的文件，会使用 /config/jest/cssTransform.js 文件处理
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

    // 不是以 js jsx mjs cjs ts tsx css json 这些为后缀的文件会使用 /config/jest/fileTransform.js 文件进行处理
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
      "<rootDir>/config/jest/fileTransform.js",
  },

  // 忽略 transform 配置转化的文件
  transformIgnorePatterns: [
    // node_modules 目录下的 js jsx mjs cjs ts tsx 后缀的文件都不需要转化
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",

    // .module.css/sass/scss 后缀的文件都不需要转化
    "^.+\\.module\\.(css|sass|scss)$",
  ],

  // 自动化测试时，应用的模块应该从哪里寻找，默认是在 node_modules
  modulePaths: [],

  // 模块名字使用哪种工具进行映射
  moduleNameMapper: {
    // 针对于 native 移动端
    // "^react-native$": "react-native-web",

    // 将 .module.css/sass/scss 模块使用 identity-obj-proxy 工具进行转化
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  },

  // 引入模块时，进行自动查找模块类型，逐个匹配
  moduleFileExtensions: [
    "web.js",
    "js",
    "web.ts",
    "ts",
    "web.tsx",
    "tsx",
    "json",
    "web.jsx",
    "jsx",
    "node",
  ],

  // 监听插件
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],

  // 重置 mock
  resetMocks: true,
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.