利用 Jest 来测试你的 Javascript 代码吧

最近在给 Blink 项目写测试用例,可谓是写到天昏地暗。当时选用 Jest 纯粹是看上了它的文档写的很好,容易上手。但是这两三天下来也就用了几个 api ,新手村都还没出,其实应该是没有那么相对复杂的应用环境,所以没有使用到 Jest 的一些高级功能,所以这里另写一篇文章,深入了解一下。

配置

话不多说,立马实践一下,因为技术栈一直是 Typescript ,所以这里使用了 ts-jest

1
2
# npm安装所有依赖
yarn add jest @types/jest ts-jest typescript -D

运行完后就安装好了我们所需要的所有依赖包,然后在项目目录下加一个配置文件 jest.config.js,添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
'transform': {
'^.+\\.tsx?$': 'ts-jest'
},
'testRegex': '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
'moduleFileExtensions': [
'ts',
'tsx',
'js',
'jsx',
'json',
'node'
],
globals: {
'ts-jest': {
'diagnostics': false,
}
}
}

这里是按 ts-jest 推荐配置所配置的,如果需要更详细的配置项可以自行 google。这里需要说明一点,这个 testRegex 配置项需要我们把测试用例文件写在项目根目录的 __test__ 文件夹中,并且文件命名以 .test.ts 或者 .spec.ts 结尾。
配置文件加完后,还需要把 package.jsonscripts 添加:

1
"test": "jest --verbose"

–verbose 配置项可以使我们看到更详细的测试结果。

第一个测试用例

新建一个 __test__ 文件夹,里面新建一个 lebron.test.ts 文件,写入下面的内容:

__test__/lebron.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type Position = 'PG' | 'SG' | 'PF' | 'SF' | 'C';

export class Lebron {
// Unit: cm
public height:number = 203;

// Unit: pound
public weight:number = 250;
public team:string = 'Lakers';
public position:Position;

constructor(position:Position) {
this.position = position;
}
}

describe('Jest test for Lebron James', () => {
const lebron = new Lebron('SF');

it('Lebron is a SF', () => {
expect(lebron.position).toBe('SF');
})
});

然后运行 yarn test,即可看到如下结果。
结果

在上面那个测试用例,期望结果是:Lebron 是一个小前锋,describe 用于定义一个测试集,在测试集里面你可以放很多个测试用例,同时也说明他们是同一类测试,上面的例子则是定义了一个 Lebron 的 Jest 测试集。
对于测试用例,可以使用 it 或者 test 去定义,基本上没啥区别,然后就是断言了,基本上 toBe() 以及 not.toBe() 以及可以满足大部分需求了,然而 Jest 还是提供了很多浅显易懂好用的 API,我挑几个展示一下:

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
// 判断数字是否大于
expect(2).toBeGreaterThan(1); // true

// true (非 false, 0, '', null, undefined, NaN)
expect('foo').toBeTruthy();
// false (false, 0, '', null, undefined, NaN)
expect('').toBeFalsy();

// 判断字符串:传入字符串或者正则
expect('felixzzz.cn').toMatch('felix'); // true

// 是否 defined
expect(undefined).toBeUndefined(); // true
expect(undefined).toBeDefined(); // false

// 对象
const obj1 = {
a: 1,
b: 2,
};
const obj2 = {
b: 2,
}
// 判断是否有对象子集
expect(obj1).toMatchObject(obj2); // true
// 判断是否有目标属性
expect(obj1).toHaveProperty('b'); // true

// ...

这样的 API 你可以在 Jest 官网上查看,这里就不多说了。
挖坑不填系列 = =,大家可以看一下这篇文章