如何在 Gatsby 仓库中设置 mocha 以进行运行测试

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"
}

这给了我一个错误：unexpected token import for import { expect } from 'chai'; 在我的基本测试文件中。所以下一步，遵循盖茨比的约定：

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

好的，我们上线了，但没有测试运行ning，下一次迭代：

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

好吧，现在它崩溃了，因为 SyntaxError: Invalid or unexpected token 对于一个反应组件文件中的 <div>。

在这一点上，我想知道我是否真的必须安装 babel 及其所有机器只是为了运行一个简单的测试，尤其是因为 gatsby 根本不使用 babel？

有人知道一个非常干净、现代的设置，可以让在 Gatsby 中使用 mocha 编写测试变得简单吗？ esm 可以在没有一堆 hack 的情况下学会阅读 JSX 吗？

Answer 1

At this point, I wonder if I really have to install babel and all of its machinery just to run a simple test

不幸的是，是的。

, especially since gatsby does not use babel at all?

其实这不是真的，它是 babel 所有的方式。

值得庆幸的是，由于 Gatsby 已经完成了设置 babel 的所有繁琐工作，因此设置测试相当容易。

首先，安装缺少的位：

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

然后使用以下配置在项目的根目录添加一个新的 .babelrc：

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

You don't need to install babel-preset-gatsby since it comes with all Gatsby setup.

应该是这样。现在将 esm 替换为 @babel/register 并注册 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: () => {} }

How to setup mocha to run tests in a Gatsby repo