javascript - 使用 React 从 Babel 迁移到 SWC
问题描述
TL;博士
如何翻译这样的节点脚本:
"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",
使用SWC而不是 Babel?
语境
我们最近升级了 Next.js 版本。Next.js 现在支持SWC 而不是 Babel。
我们项目中 React 的单元测试是用RITEway编写的。测试命令为:
"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",
它首先使用 Babel 转换文件,否则import
语句和 JSX 会导致错误。
在我们尝试迁移到 SWC 的过程中,我们对 CLI 不满意。但是,我们找到了@swc-node/register
包。它允许我们像这样转换我们的命令:
"test": "riteway -r @swc-node/register src/**/*.test.js | tap-nirvana"
它修复了像import
语句这样的新语法,并且这样的测试将运行:
import { describe } from 'riteway';
describe('my test', async assert => {
assert({
given: 'true',
should: 'be true',
actual: true,
expected: true,
});
});
但是,像这样对 React 组件进行测试
import { describe } from 'riteway';
import render from 'riteway/render-component';
import Authentication from './user-authentication-component';
describe('user authentication component', async assert => {
const $ = render(<Authentication />);
assert({
given: 'just rendering',
should: "render 'Authentication'",
actual: $('*:contains("Authentication")').text(),
expected: 'Authentication',
});
});
仍然抛出以下错误:
$ yarn test
yarn run v1.22.17
$ riteway -r @swc-node/register src/**/*.test.js | tap-nirvana
/Users/user/dev/learning-flow/node_modules/@swc/core/index.js:135
return bindings.transformSync(isModule ? JSON.stringify(src) : src, isModule, toBuffer(newOptions));
^
Error: error: Expression expected
|
7 | const $ = render(<Authentication />);
| ^
error: Expression expected
|
7 | const $ = render(<Authentication />);
| ^
error: Unexpected token `)`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
|
7 | const $ = render(<Authentication />);
| ^
Caused by:
0: failed to process js file
1: Syntax Error
at Compiler.transformSync
我们如何创建该命令以使其与 SWC 一起运行?
解决方案
我假设您的问题只是关于玩笑,而不是关于 swc 的 webpack 设置。
我自己从来没有在玩笑中使用过 swc,所以这只是在黑暗中拍摄,但我找到了一个名为 jest 的包,@sec-node/jest
它允许您使用如下转换器:
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': ['@swc-node/jest'],
},
}
这应该允许您转换所有[jt]sx?
导入。
还有一个不同的叫它@swc/jest
似乎做同样的事情。
我会从尝试这些开始。
您的问题是 jest 无法解析您的代码,例如,如果您使用的是打字稿,则需要类似ts-jest
的东西才能为您解析 TS,我认为在这种情况下,您需要一个swc/jest
转译器,它应该首先编译您的代码并将其输出到内存,然后将其汇集到 jest 以运行它。
另一种方法是您可以使用 swc 手动编译测试,然后在编译的文件上运行 jest 作为单独的步骤。至少使用 TS 你可以做到这一点,首先使用编译所有内容tsc
,然后在.js
输出上运行 jest。我确信swc应该工作相同。
至于为什么@swc-node/register
您使用的软件包不起作用,我不知道。
推荐阅读
- c# - 如何在进一步处理之前检查列表中的任何空值?
- android - 嵌套的 VOLLEY GET 请求方法没有给出正确的结果
- python - 重塑 Pandas DataFrame:将列切换为索引并将重复值切换为列
- laravel - 如何在vue中将数据从孩子传递给父母
- gremlin - Gremlin-Python:切换从边到顶点的遍历
- python - 如何将您自己的数据导入 google colab
- python - 在熊猫数据框中找到倒数行
- java - 如何从对象列表的每个对象中删除一个字段?
- ios - 自定义框架内的图像设置
- typescript - Firebase 云函数 - 缺少 FIREBASE_CONFIG 环境变量