Jest+Enzyme React js/typescript測試環境配置案例

本文案例github：https://github.com/axel10/react-jest-typescript-demo

 

配置jest的react測試環境時咱們能夠參考官方的配置教程：

https://jestjs.io/docs/zh-Hans/getting-started

https://jestjs.io/docs/zh-Hans/tutorial-react

若是要兼容typescript項目，能夠參考ts-jest提供的教程：

https://github.com/basarat/typescript-book/blob/master/docs/testing/jest.md

 

這裏對案例中一些可能說的不是很清楚的地方進行一下講解：

1：若是在測試中使用了enzyme則須要配置啓動文件，不然報錯：

先在jest.config.js中配置setFiles選項：

"setupFiles": [
  "<rootDir>/test.setup.js"
],

 

test.setup.js：

import * as enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

enzyme.configure({ adapter: new ReactSixteenAdapter() });

 

 

2：若是react組件中import了靜態資源或者啓用了css module則須要在jest.config.js配置moduleNameMapper選項：

moduleNameMapper: {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less|scss)$": "identity-obj-proxy"
},

 

fileMock.js：

module.exports = 'test-file-stub'; // 導出一個字符串以模擬url

identity-obj-proxy是一個npm包，須要安裝。

npm i identity-obj-proxy -D

 

 

3：若是啓用了typescript兼容，除了根據官方案例進行配置之外，還須要在tsconfig.json中將」jsx」選項配置爲」react」，不然會報語法沒法識別的錯誤。