如何設置 mocha 以在 Gatsby 存儲庫中運行測試

Question

我正在嘗試使用 Mocha 讓測試在 gatsby 存儲庫中運行，因為我們已經有很多使用 mocha 和 chai 的測試，而且我們不希望有 2 個不同的斷言庫，所以我們沒有使用 Jest。

我做的第一件事是這樣的：

npm i -D mocha chai @testing-library/react

其中安裝了 mocha v8 和 chai v4，然后我在 package.json 中添加了一個簡單的腳本，看看會發生什么：

"scripts": {
  "test": "mocha --watch"
}

這給了我一個錯誤： import { expect } from 'chai'; unexpected token import ； 在我的基本測試文件中。 所以下一步，遵循蓋茨比的約定：

"scripts": {
  "test": "npx --node-arg '-r esm' mocha --watch"
}

好的，我們已經上線了，但沒有運行測試，下一次迭代：

"scripts": {
  "test": "npx --node-arg '-r esm' mocha --watch 'src/**'"
}

好的，現在它因為SyntaxError: Invalid or unexpected token for a <div> in react 組件文件而崩潰。

在這一點上，我想知道我是否真的必須安裝 babel 及其所有機器來運行一個簡單的測試，特別是因為 gatsby 根本不使用 babel？

有人知道一個非常干凈、現代的設置，它可以讓在 Gatsby 中使用 mocha 編寫測試變得簡單嗎？ 可以教esm在沒有一堆 hack 的情況下閱讀 JSX 嗎？

Answer 1

在這一點上，我想知道我是否真的必須安裝 babel 及其所有機器來運行一個簡單的測試

不幸的是，是的。

，特別是因為 gatsby 根本不使用 babel？

其實這不是真的，它一直是babel。

---

值得慶幸的是，由於 Gatsby 已經完成了設置 babel 的所有繁瑣工作，因此設置測試相當容易。

首先，安裝缺少的位：

npm i -D @babel/register jsdom jsdom-global

然后使用以下配置在項目的根目錄添加一個新的.babelrc ：

{
  "presets": ["babel-preset-gatsby"]
}

你不需要安裝babel-preset-gatsby ，因為它帶有所有 Gatsby 設置。

應該是這樣的。 現在用@babel/register替換esm並注冊jsdom-global 。 還要確保將NODE_ENV設置為test ：

NODE_ENV=test npx mocha -r @babel/register -r jsdom-global/register ./src/**/*.test.js

這應該有效。

---

將測試命令添加到package.json時，無需使用 npx：

"scripts": {
  "test": "NODE_ENV=test mocha -r @babel/register -r jsdom-global/register ./src/**/*.test.js"
}

---

如果你正在測試 Gatsby 組件，這里有一些你需要注意的全局變量： __PATH_PREFIX__ 、 __BASE_PATH__和___loader 。

隨心所欲地模擬它們，但要進行快速而骯臟的測試：

globalThis.__PATH_PREFIX__ = '/'
globalThis.__BASE_PATH__ = './'
globalThis.___loader = { enqueue: () => {} }