使用 React 从 Babel 迁移到 SWC

Question

长话短说

如何翻译这样的节点脚本：

"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';

describe('my test', async assert => {
  assert({
    given: 'true',
    should: 'be true',
    actual: true,
    expected: true,
  });
});

仍然抛出以下错误：

$ 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 一起运行？

Answer 1

经过一些实验后，我发现如果您import React from 'react';在每个文件（组件和测试）中并将文件扩展名更改为文档中.jsx所述，则它会起作用。

然而，这并不令人满意，因为我们希望使用React 17 的 JSX 转换功能来避免在每个文件中导入 React。此外，我们希望保留所有文件结尾.js。

到目前为止，我们尝试过设置，但没有任何运气。.swcrc

我在这里发布这个答案，以防找不到配置方法.swcrc。