Migrating from Babel to SWC with React

Question

. 。 Answers to this question are eligible for a +150 reputation bounty. J. Hesters is looking for an : 寻找：

Any solution to the problem would be much appreciated 🙏

TL;DR

How to translate a node script like this:

"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",

to use SWC instead of Babel?

---

Context

We recently upgraded our Next.js version. Next.js now supports SWC instead of Babel.

The unit tests for React in our project are written with RITEway . The test command is:

"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",

It transforms the files with Babel first because otherwise import statements and JSX would cause errors.

During our attempts to migrating to SWC, we had no luck with the CLI. However, we found the @swc-node/register package . It allowed us to transform our command like this:

"test": "riteway -r @swc-node/register src/**/*.test.js | tap-nirvana"

which fixes new syntax like the import statement and a test like this would run:

import { describe } from 'riteway';

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

However, tests for React components like this

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',
  });
});

still throw the following error:

$ 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

How can we create that command so that it runs with SWC?

Answer 1

I'll assume your question is only about jest and not about the webpack setup for swc.

I've never used swc myself in jest so this is just a shot in the dark, but I found a package for jest called @sec-node/jest which allows you to use a transformer like:

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc-node/jest'],
  },
}

Which should allow you to transpile all [jt]sx? imports.

There's also a different one called @swc/jest which seems to do the same thing.

I'd start with trying those.

Overall your issue is that jest isn't able to parse your code, for example if you were using typescript you'd need something like ts-jest in order to parse your TS for you, I think in this case you need a swc/jest transpiler which should first compile your code and output it to memory, then funnel it to jest to run it.

The alternative is that you could compile the tests before hand using swc, then run jest on the compiled files as a separate step. At least with TS you can do that, first compile everything using tsc and then run jest on the .js output. I'm sure swc should work the same.

As to why the @swc-node/register package you're using isn't working, I have no idea.

Answer 2

After some experimentation I found out that it works if you import React from 'react'; in every file (both the component as well as the test) and change the file extensions to .jsx as described in the docs .

However, this is unsatisfying, as we'd like to use React 17's JSX transform feature to avoid having to import React in every file. Additionally, we'd like to keep all file endings .js .

We tried setting .swcrc without any luck so far.

I'm posting this answer here in case no way to configure .swcrc can be found.