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”，否則會報語法無法識別的錯誤。