在 Node.js 中使用 Jasmine 測試 React app

Jasmine NPM 套件最初僅設計用來針對你的 Node.js 程式碼執行規範，但透過搭配其他套件，也能使用它來執行 React 規範。本教學會假設你使用 babel 編譯程式碼，並使用 React Testing Library 進行測試。我們也會使用 jsdom 為這些規範提供假的 HTML DOM。

此設定的完整範例也可取得。

選擇你會使用的套件管理工具

npm (create-react-app 的預設值)
yarn

基本設定

如果你還沒安裝，請安裝這些套件

$ yarn add --dev @babel/core \
                 @babel/register \
                 babel-preset-react-app \
                 cross-env \
                 jsdom \
                 jasmine

$ npm install --save-dev @babel/core \
                         @babel/register \
                         babel-preset-react-app \
                         cross-env \
                         jsdom \
                         jasmine

然後初始化 Jasmine

$ yarn run jasmine init

$ npx jasmine init

此命令會建立 spec/support/jasmine.json，並填入初始的預設組態。在初始化 Jasmine 之後，我們會做的第一件事是建立一個幫手，將 babel 註冊到 require 鏈結中。這樣一來，TypeScript 檔案在載入時就會即時編譯為 Javascript。在 spec/helpers 目錄中建立一個叫 babel.js 的新檔案

require('@babel/register');

或者，如果使用 TypeScript

require('@babel/register')({
    "extensions": [".js", ".jsx", ".ts", ".tsx"]
});

我們需要透過加入 Babel 組態來讓 Babel 知道我們要使用哪種 Javascript，內容如下所示

{
  "presets": ["react-app"]
}

接著，我們需要提供一個模擬的瀏覽器環境。在 spec/helpers 中建立 jsdom.js，內容如下所示

import {JSDOM} from 'jsdom';

const dom = new JSDOM('<html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.navigator = dom.window.navigator;

為了確保這些檔案會在執行任何規範前載入，我們會編輯 spec/support/jasmine.json。我們必須在包含 TypeScript、JSX 或任何需要轉譯的其他程式碼的任何幫手載入之前，載入 Babel 幫手，因此我們會修改 jasmine.json 如下所示

"helpers": [
  "helpers/babel.js",
  "helpers/**/*.js"
],

或者，如果使用 Typescript

"helpers": [
  "helpers/babel.js",
  "helpers/**/*.{js,ts}"
],

接著，設定 package.json 中的 test 指令碼，以便執行 Jasmine

  "scripts": {
    "test": "cross-env NODE_ENV=test jasmine",

處理 CSS 和影像的匯入

React 程式碼通常會匯入 CSS 或影像檔案。通常這些匯入會在建置時解決，但它們會在 Node 中執行規範時產生錯誤。為了修復這個問題，我們會新增一個套件

$ yarn add --dev ignore-styles

$ npm install --save-dev ignore-styles

並將以下程式碼置入 spec/helpers/exclude.js。

import 'ignore-styles';

選用：規範檔案樣式組態

你也可能會想要變更 Jasmine 尋找規範檔案的方式。Jasmine 傳統上會在 spec 目錄中尋找名稱結尾為 .spec.js 的檔案，但 React 專案中常見的習慣是將規範檔案置於與其測試的程式碼相同的目錄中，並將檔名結尾設定為 .test.js。如果你想遵循此習慣，請相應變更 spec/support/jasmine.json 中的 spec_dir、spec_files 和 helpers 設定

  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.js"
  ],

或者，如果是 TypeScript

  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.{js,ts}"
  ],

設定 React 測試工具程式

我們需要一個渲染 React 元件並檢查結果的方式。有幾個工具程式庫可以提供此功能。最熱門的是 React Testing Library。

react-testing-library 的設定很簡單。我們只需要確認已安裝 @testing-library/react 套件即可。如果您使用較新版本的 create-react-app 來初始化您的應用程式，它可能已存在。否則，請安裝它。

$ yarn add --dev @testing-library/react

$ npm install --save-dev @testing-library/react

請參閱 React Testing Library 文件以瞭解更多資訊。相關的 jasmine-dom 範例比對程式庫也可能很有用。

請注意，大多數 React Testing Library 文件都是為 Jest 編寫的，因此在 Jasmine 中使用程式碼範例前，需要進行一些轉換。特別是

test() 的 Jasmine 等效項目是 it()。
儘管有很多重疊，Jest 和 Jasmine 有不同的內建範例比對器。
Jest 在每個檔案中建立一個隱含的頂級套件。Jasmine 沒有，因此強烈建議將每個檔案的內容包裝在一個命名良好的 describe 內。

將程式碼範例從 Jest 轉換為 Jasmine 時，您可能會發現參考 Jasmine 教學、Jasmine 附帶的範例比對器清單和 jasmine-dom 附帶的範例比對器清單很有用。

總結

一切都設定好了。編寫您的規格並執行它們

$ yarn test

$ npm test