Jest-Extended
- 安装
- 配置
  - Jest版本>24:
  - Jest版本<24:
Expect
配置
使用
- 测试异常
  - 测试文件
常见错误
- TypeError：window.matchMedia不是一个函数
- ReferenceError: crypto is not defined
常见问题
- 模拟Date.now()

Jest-Extended

安装

yarn add -D jest-extended

配置

Jest版本>24:

"jest" : {
    "setupFilesAfterEnv": ["jest-extended"]
}

Jest版本<24:

"jest": {
    "setupTestFrameworkScriptFile": "jest-extended"
}

Expect

配置

给单独的文件设置测试环境

在Jest中如果有单个文件的测试环境可以通过在文件开始的位置添加注释来解决：

/**
* @jest-environment jsdom
**/

常用配置

module.exports = {
    collectCoverage: true, // 启动代码测试覆盖率
  testEnvironment: 'node', // 测试环境为node环境
};

常用命令

在我们使用Jest的时候，我们常常会使用一些命令参数，这里列出一些常用的参数：

—watch 启用观察者模式，在运行后不会退出。会等到文件修改后重新运行测试
使用
测试异常
测试异常，我们可以使用toThrow(别名为toThrowError)。 ```javascript function drinkFlavor(flavor) { if (flavor == ‘octopus’) { throw new DisgustingFlavorError(‘yuck, octopus flavor’); } // Do some other stuff }

test(‘throws on octopus’, () => { function drinkOctopus() { drinkFlavor(‘octopus’); }

// Test that the error message says “yuck” somewhere: these are equivalent expect(drinkOctopus).toThrowError(/yuck/); expect(drinkOctopus).toThrowError(‘yuck’);

// Test the exact error message expect(drinkOctopus).toThrowError(/^yuck, octopus flavor$/); expect(drinkOctopus).toThrowError(new Error(‘yuck, octopus flavor’));

// Test that we get a DisgustingFlavorError expect(drinkOctopus).toThrowError(DisgustingFlavorError); });

<a name="yXGmi"></a>
### 模拟请求库
<a name="s2P6B"></a>
#### 开发文件
```plsql
import request from 'umi-request';
export function getUserById(id: string) {
    return request(`https://www.example.com/api/user/${id}`)
}

测试文件

import request from 'umi-request';
import { getUserById } from './example.ts';
jest.mock('umi-request', () => {
    return async () => {
      return { name: 'name' }
  }
});
describe('user', () => {
    it('should name is name', async () => {
      const result = await getUserById('10086');
    expect(result).toEqual({ name: 'name' })
  })         
})

需要注意的是，jest.mock的第一个参数是umi-request，而不是request。

常见错误

TypeError：window.matchMedia不是一个函数

在Jest测试组件的时候会出现这个错误，之所以会出现这个错误，是因为在测试组件的时候使用了Jsdom库。而Jsdom库是对浏览器的模拟，这个时候没有实现对window.matchMeida的模拟，所以会报这个错误。而解决方法就是我们自己来模拟(mock)一下就好。见以下代码：

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

ReferenceError: crypto is not defined

在我们使用jest测试组件的时候，我们可以会遇到下面这个bug：ReferenceError: crypto is not defined。在遇到这个问题的时候，我们只要在测试中加入下面的代码即可。

const crypto = require('crypto');
Object.defineProperty(global.self, 'crypto', {
  value: {
    getRandomValues: (arr) => crypto.randomBytes(arr.length),
  }
})

常见问题

模拟Date.now()

在Jest中模拟Date.now()的方法很简单，只要使用 jest.setSystemTime(new Date('2008-08-08'))即可。

欢迎赞赏
Jest - 图1

Jest