使用 —config Flag 及 testMatch Option 以不同的配置跑測試

假設專案除了前端的程式碼之外，也有單純運行在 node.js 環境的程式碼，我們需要測試確保這些程式碼在 node 環境運作正常，所以我們需要同時爲 Jest 配置不同環境的設定，好讓 Jest 可以針對不同檔案，執行符合環境的測試。

我們需要將原先的 jest-config.js 移到 test 資料夾，然後將它改名為 jest-common.js ，這個檔案是 client 及 server 會共用到的設定。另外，在同一個資料夾內新增 jest.client.js 跟 jest.server.js ，分別為 client 及 server 的配置檔。現在檔案的結構如下：

├── src
│   ├── __server_tests__
│   │   └── *.js
│   └── __tests__
│       └── *.js
├── test
│   ├── jest-common.js
│ 	├── jest.client.js
│   └── jest.server.js
├── ~~jest-config.js~~  移除
├── .eslintrc.js
└── package.json

以上面的架構為例， __server_tests__ 裡為 server 的測試， __tests__ 為 client 的測試。

我們回到 jest-common.js 內，保留 server 及 client 測試共用的設定。Jest 預設是將配置檔所在的位置當作根目錄，因為將這些配置檔移到 test 資料夾裡面的關係，現在需要告訴 Jest 專案的根目錄是哪裡，在 jest-common.js 內加上 rootDir: path.join(__dirname, '..'), ：

test/jest-common.js

const path = require('path')

module.exports = {
  rootDir: path.join(__dirname, '..'), // 設置根目錄
  ...
}

在 jest.server.js 裡，先引入 jest-common.js ****裡共用的配置。我們要告訴 Jest 這些配置是針對哪些檔案，設定 testMatch ，值為 ['**/__server_tests__/**/*.js'] ，代表這份配置套用在所有 __server_tests__ 內的測試檔：

test/jest.server.js

const path = require('path')

module.exports = {
  ...require('./jest-common'), // 引入共用配置
  coverageDirectory: path.join(__dirname, '../coverage/server'),
  testEnvironment: 'jest-environment-node', // 環境
  testMatch: ['**/__server_tests__/**/*.js'], // server site testtest/jest.server.js
}

test/jest.client.js 檔案的內容，基本上就是複製原先 jest-config.js client 方面的配置：

test/jest.client.js

module.exports = {
  ...require('./jest-common'),
  testEnvironment: 'jest-environment-jsdom', // 環境
  ...
}

配置好後，可以在 jest 後面加上 --config 及配置的檔案：

npx jest --config test/jest.clients.js 

或

npx jest --config test/jest.server.js

如果每次都要這樣打有點麻煩，可以在 package.json 加入 script，例如：

"scripts": {
		"test:client": "jest --config test/jest.client.js",
    "test:server": "jest --config test/jest.server.js",
    "test:watch:client": "jest --config test/jest.client.js --watch",
    "test:watch:server": "jest --config test/jest.server.js --watch",
		...
  },

最後，如果 .eslintrc.js 有用到 jest-config.js 的部分，也記得要更新一下路徑為 jest-common.js ：

{
  jestConfigFile: path.join(__dirname, './test/jest-common.js'),
},

P.S. 今天 Jest 配置的部分即將告一個段落，但其實有些段落先跳過了，之後有空檔會再把那些內容補完，先讓鐵人賽進行下去再說，預計明天進入 React 測試的篇章。