如何在 Create-React-App 和 Typescript 中使用 Mocha？获取语​​法错误：意外的令牌导入

Question

我开始使用 Jest 在我的 create-react-app 项目中测试一些简单的 JavaScript 代码，但它在 Windows 上太慢了，在观看模式下进行简单测试需要 15-20 秒 - 所以我切换到 mocha，这几乎是即时的。

然后我将 JavaScript 文件切换到 TypeScript 并在运行测试时出现此错误 -

(function (exports, require, module, __filename, __dirname) { import assert from 'assert';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)

我最终通过更改tsconfig.json文件让它工作

"module": "esnext",

到

"module": "commonjs",

它起作用了 --- 有一段时间 - 但是在做之后再次出现导入错误npm start- 如果你在 react-scripts 清除屏幕之前及时发现它，你可以看到问题 -

正在对您的 tsconfig.json 文件进行以下更改：compilerOptions.module must be esnext (for import() and import/export)

所以 create-react-app 覆盖了“module”行——你如何解决这个问题？

我遵循了这个问题中使用的方法 - 如何配置 react-script 以便它不会在“开始”时覆盖 tsconfig.json

在tsconfig.json 中，我添加了

  "extends": "./tsconfig-extensions.json"

在tsconfig-extensions.json我有

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

但是运行npm test我在“导入”上遇到相同的错误。

有没有理由为什么这不起作用，或者有办法解决它？

这里有更多讨论，建议将 .ts 文件放在 src 之外 - https://github.com/facebook/create-react-app/issues/5508#issuecomment-449431287

Timer 于 2018 年 12 月 21 日评论：我们不支持您将 TypeScript 文件与 JavaScript 文件并排放置。您要么需要让 Create React App 自己编译 TypeScript，要么将您的项目文件移动到不同的文件夹。选项集是必需的，因为这就是我们集成的工作方式——您似乎在反对它而不是使用它。

ArcticZeroo：除了博客文章之外，我实际上根本找不到有关 React 中 TS 支持的任何信息（并且最终只需要找到相关的提交来添加 TS 支持以弄清楚发生了什么）——有没有什么类型的关于它的文档开始？我愿意写一些东西来解决我从 1.x 迁移到 2.1.x 时遇到的问题:)

计时器：现在除了“添加 TypeScript”之外没有任何文档——如果你能提出一些很棒的东西，我们愿意听取任何反馈。

有问题的文档在这里 - https://facebook.github.io/create-react-app/docs/adding-typescript，它只是说

注意：您不需要制作 tsconfig.json 文件，我们会为您制作一个。您可以编辑生成的 TypeScript 配置。

因此，如果有必要，您如何设置配置以便您可以在 src 之外拥有 Typescript 文件？它们是否需要编译为 js 并放入 src 中？

---

编辑：我尝试过的其他一些东西 - 使用require而不是import，使用 Jest 和 WLS Ubuntu（可能快一点但不多），Jest 和 "testEnvironment": "node" - 没有更快。

我还尝试将npm start运行和设置模块留给 commonjs，但我的配置肯定有问题，因为现在mocha ... --watch不会更新测试的更改。

我想我暂时不会进行测试 - Jest 太慢 - 我失去了等待测试运行的思路......