Jest前端测试入门

使用匹配器

1. 精确匹配
   toBe匹配使用===全等匹配

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

如果需要检查对象或者数组需要使用toEqual

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

2. 真值匹配

• toBeNull 只匹配 null
• toBeUndefined 只匹配undefined
• toBeDefined 和 toBeUndefined 相反
• toBeTruthy 匹配任何if语句为真
• toBeFalsy 匹配任何 if 语句为假

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

3. 数字
   大多数的比较数字有等价的匹配器

• toBe 等于
• toBeGreaterThan 大于
• toBeGreaterThanOrEqual 大于等于
• toBeLessThan 小于
• toBeLessThanOrEqual 小于等于

4. 字符串
   您可以检查对具有toMatch正则表达式的字符串

test('test toMatch', () => {
  expect('dankun').toMatch(/^dan/)
});

5. 数组和迭代器
   可以通过toContain来检查一个数组或者迭代对象是否包含某个特定项

test('the shopping list has beer on it', () => {
  const people = ['kk','jj','nb','beer'];
  expect(people).toContain('beer')
});

具体使用参考https://jestjs.io/docs/zh-Hans/expect

测试异步代码

1. 回调
   测试回调需要使用done,jest会等done回调函数执行结束后，执行测试

const fetchData = (callback) => {
  setTimeout(() => {
    callback('dankun');
  }, 200)
}

test('测试异步回调', (done) => {
  const callback = (data) => {
    expect(data).toBe('dankun')
  }
  fetchData(callback);
});

2. Promise

const fetchData = () => {
  return new Promise((reslove, reject) => {
    reslove('dankun')
  })
}

test('测试异步回调', () => {
  fetchData().then(data => {
    expect(data).toBe('dankun')
  });
});

3. await

const fetchData = () => {
  return new Promise((reslove, reject) => {
    reslove('dankun')
  })
}

test('测试异步回调', async () => {
  const data = await fetchData();
  expect(data).toBe('dankun')
});

初始化和清理

写测试的时候经常在运行测试之前做一些准备工作,在运行测试之后进行整理工作。

为多次测试重复设置

如果有一些为多次测试重复设置的工作,可以使用beforeEach和afterEach

beforeEach(() => {
  console.log('start!!!')
})

afterEach(() => {
  console.log('end!!!')
})

test('test demo1', () => {
  expect('dankun').toMatch(/^dan/);
})

test('test demo2', () => {
  expect(2).toBeLessThan(3)
})

会分别执行两次的start和end

console.log sum.test.js:4
    start!!!

  console.log sum.test.js:8
    end!!!

  console.log sum.test.js:4
    start!!!

  console.log sum.test.js:8
    end!!!

一次性设置

某些情况下，只需要在文件的开头做一次性的设置。需要使用beforeAll,afterAll进行处理
下面情况start和end只会执行一次

beforeAll(() => {
  console.log('start!!!')
})

afterAll(() => {
  console.log('end!!!')
})

test('test demo1', () => {
  expect('dankun').toMatch(/^dan/);
})

test('test demo2', () => {
  expect(2).toBeLessThan(3)
})

作用域

默认情况下 beforeEach和afterEach是应用到文件的每个测试。但是我们可以是describe来区分测试分组。当 before 和 after 的块在 describe 块内部时，则其只适用于该 describe 块内的测试。

test('test demo1', () => {
  beforeEach(() => {
    console.log('demo1 start!!!')
  })
  expect('dankun').toMatch(/^dan/);
})

test('test demo2', () => {
  expect(2).toBeLessThan(3)
})

Mock函数

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

• 捕获函数调用情况
• 设置函数返回值
• 改变函数的内部实现

jest.fn()

1. 基本使用
   jest.fn()默认会返回undefined作为返回值

let mockFn = jest.fn()
expect(mockFn()).toBeUndefined();

2. 设置返回值

• 返回固定值

test('测试jest.fn()返回固定值', () => {
  let mockFn = jest.fn().mockReturnValue('dankun')
  expect(mockFn()).toBe('dankun');
})

• 内部实现返回某个值

test('测试jest.fn()内部实现', () => {
  let mockFn = jest.fn((str)=> {
    return str + 'test'
  })
  expect(mockFn('dankun_')).toBe('dankun_test');
})

• 返回Promise

test('测试jest.fn()返回Promise', async () => {
 let mockFn = jest.fn().mockResolvedValue('default');
 let result = await mockFn();
 expect(result).toBe('default');
})

jest.mock()

比如fetch.js封装的请求方法可能是我们在其他模块调用时候,并不需要进行实际的请求（请求方法已经通过单侧或需要该方法返回非真实数据）。此时，使用jest.mock(）去mock整个模块是十分有必要的。

// fetch函数
const axios = require('axios');

module.exports = {
  async fetchPostsList(callback) {
    return axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
      return callback(res.data);
    })
  }
}

mock的模块

// events.js

import fetch from './fetch';

export default {
  async getPostList() {
    return fetch.fetchPostsList(data => {
      console.log('fetchPostsList be called!');
      // do something
    });
  }
}

在测试代码中如下

// 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);
});

mock.mockImplementation

当您需要定义从另一个模块创建的模拟函数的默认实现时，mockImplementation方法很有用：
mock fetch模块中的fetchPostsList方法

jest.mock('./fetch')
const fetch = require('./fetch');

test('fetchPostsList 函数被调用', async() => {
    fetch.fetchPostsList.mockImplementation(async () => {
        return await Promise.resolve('dankun')
    });
    const result=  await fetch.fetchPostsList();
    console.log(result)
    expect(result).toBe('dankun')
})

jest.spyOn()

jest.spyOn()方法同样创建一个mock函数，但是该mock函数不仅能够捕获函数的调用情况，还可以正常的执行被spy的函数。实际上，jest.spyOn()是jest.fn()的语法糖，它创建了一个和被spy的函数具有相同内部代码的mock函数。