如何设置 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: () => {} }