使用 React 從 Babel 遷移到 SWC

Question

賞金明天到期。 此問題的答案有資格獲得+150聲望獎勵。 J. Hesters正在從信譽良好的來源尋找答案：

任何解決問題的方法將不勝感激🙏

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

Answer 1

我假設你的問題只是關於玩笑而不是關於 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包不起作用，我不知道。

Answer 2

經過一些實驗，我發現如果您import React from 'react'; ，它會起作用import React from 'react'; 在每個文件（組件和測試）中，並將文件擴展名更改為.jsx ，如文檔中所述。

然而，這並不令人滿意，因為我們希望使用React 17 的 JSX 轉換功能來避免在每個文件中導入 React。 此外，我們希望保留所有文件結尾.js 。

到目前為止，我們嘗試設置.swcrc沒有任何運氣。

我在這里發布這個答案，以防找不到配置.swcrc方法。