在React应用程序的非src文件夹中运行Jest on TypeScript测试

Question

我有一个使用create-react-app和typescript模板创建的react应用程序。据我所知，src文件夹用于存储将成为web应用程序一部分的代码。我想在同一个项目中包括服务器代码，所以我把它放在一个单独的文件夹server中，因为这个代码不应该和前端的其他代码一起打包。问题是，我想为这段代码添加Jest测试。测试的react脚本不支持除src之外的任何地方的测试，这很好(它只是找不到它们(。如果没有CCD_ 6；弹出"；。所以我尝试在package.json:的"scripts"中添加一个新脚本

"test-server":"jest server"

现在的问题是jest无法处理TypeScript语法。在我使用TypeScript的第一个地方，它得到了一个SyntaxError。我试图将ts-jest添加为"preset"，但(1(React似乎不使用ts-jest(它使用其他东西来解析TypeScript——也许是babel？(，所以它还没有安装(2(react-scripts也不喜欢我摆弄"preset"。我可以创建一个专门的配置文件来进行服务器测试，但我需要安装ts-jest来在src之外运行TypeScript测试，这似乎很疯狂，因为React已经能够做到这一点，所以它必须已经具备了这一能力。

我的猜测是，一定有一种方法可以创建一个配置文件，我可以在"test-server"中使用它来使用babel(？(方法在TypeScript上运行Jest，但我对babel还不够了解，不知道如何做到这一点。当然，已经有人这么做了。我不是唯一一个想在React应用程序中用TypeScript对服务器代码进行测试的人。

更新我尝试了以下配置文件，并获得了进一步的信息：

module.exports = {
roots: ['<rootDir>/server'],
transform: {
'^.+\.(js|jsx|mjs|cjs|ts|tsx)$':
'<rootDir>/node_modules/react-scripts/config/jest/babelTransform.js'
},
transformIgnorePatterns: [
'[/\\]node_modules[/\\].+\.(js|jsx|mjs|cjs|ts|tsx)$',
'^.+\.module\.(css|sass|scss)$',
],
testEnvironment: 'node',
};

但当我导入的模块(此处为"nanoid"(使用模块语法时，它失败了

Details:
.../node_modules/nanoid/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { randomFillSync } from 'crypto'
                ^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import assert from 'assert';
2 | import fs from 'fs/promises';
> 3 | import { nanoid } from 'nanoid';
| ^

更新#2：嗯，我也不能在src下的测试中使用nanoid。因此，这似乎是一个更严重的问题。也许我可以破解nanoid，不使用让Jest感到不安的模块语法。

Answer 1

我在更新中提供的配置文件足以使事情正常运行。剩下的问题是nanoid。我在其他地方发现，当前版本的nanoid不适用于React/babel。我恢复到3.3.4版本，Jest现在可以处理我的服务器测试。