[英]Migrating from Babel to SWC with React
如何翻译这样的节点脚本:
"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,所以这只是在黑暗中的一个镜头,但我发现了一个名为@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
包不起作用,我不知道。
经过一些实验,我发现如果您import React from 'react';
,它会起作用import React from 'react';
在每个文件(组件和测试)中,并将文件扩展名更改为.jsx
,如文档中所述。
然而,这并不令人满意,因为我们希望使用React 17 的 JSX 转换功能来避免在每个文件中导入 React。 此外,我们希望保留所有文件结尾.js
。
到目前为止,我们尝试设置.swcrc
没有任何运气。
我在这里发布这个答案,以防找不到配置.swcrc
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.