title: Migrating from Babel to SWC with React
body: <h3>TL;DR</h3>
  <p>How to translate a node script like this:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;test&quot;: &quot;NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana&quot;,
  </code></pre>
  <p>to use <a href="https://swc.rs/" rel="nofollow noreferrer">SWC</a> instead of Babel?</p>
  <hr />
  <h3>Context</h3>
  <p>We recently upgraded our Next.js version. Next.js now supports <a href="https://nextjs.org/docs/upgrading#swc-replacing-babel" rel="nofollow noreferrer">SWC instead of Babel.</a></p>
  <p>The unit tests for React in our project are written with <a href="https://github.com/ericelliott/riteway" rel="nofollow noreferrer">RITEway</a>. The test command is:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;test&quot;: &quot;NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana&quot;,
  </code></pre>
  <p>It transforms the files with Babel first because otherwise <code>import</code> statements and JSX would cause errors.</p>
  <p>During our attempts to migrating to SWC, we had no luck with the CLI. However, we found the <a href="https://github.com/Brooooooklyn/swc-node/tree/master/packages/register" rel="nofollow noreferrer"><code>@swc-node/register</code> package</a>. It allowed us to transform our command like this:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;test&quot;: &quot;riteway -r @swc-node/register src/**/*.test.js | tap-nirvana&quot;
  </code></pre>
  <p>which fixes new syntax like the <code>import</code> statement and a test like this would run:</p>
  <pre><code>import { describe } from 'riteway';
  
  describe('my test', async assert =&gt; {
    assert({
      given: 'true',
      should: 'be true',
      actual: true,
      expected: true,
    });
  });
  </code></pre>
  <p>However, tests for React components like this</p>
  <pre class="lang-js prettyprint-override"><code>import { describe } from 'riteway';
  import render from 'riteway/render-component';
  
  import Authentication from './user-authentication-component';
  
  describe('user authentication component', async assert =&gt; {
    const $ = render(&lt;Authentication /&gt;);
  
    assert({
      given: 'just rendering',
      should: &quot;render 'Authentication'&quot;,
      actual: $('*:contains(&quot;Authentication&quot;)').text(),
      expected: 'Authentication',
    });
  });
  </code></pre>
  <p>still throw the following error:</p>
  <pre><code>$ 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(&lt;Authentication /&gt;);
    |                                    ^
  
  error: Expression expected
   
    |
  7 |   const $ = render(&lt;Authentication /&gt;);
    |                                     ^
  
  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(&lt;Authentication /&gt;);
    |                                      ^
  
  
  
  Caused by:
      0: failed to process js file
      1: Syntax Error
      at Compiler.transformSync
  </code></pre>
  <p>How can we create that command so that it runs with SWC?</p>