Error: Unexpected token 'export' when using Jest in NextJS

[andarocks]

I'm trying to write a test case in a NextJS application using Jest. On running the test, below error occurs:

/Users/abhajan/Work/Tusk/tusk-app/node_modules/uuid/dist/esm-browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      10 | import { useAccount, useBalance, useNetwork, useProvider } from "wagmi";
      11 | import Web3 from "web3";
    > 12 |
         | ^
      13 | export default function BlockchainInfo() {
      14 |   // TODO: Check if user is authenticated first
      15 |   return (

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1422:14)
      at Object.<anonymous> (node_modules/rpc-websockets/dist/lib/server.js:40:13)
      at Object.<anonymous> (node_modules/rpc-websockets/dist/index.js:30:38)
      at Object.<anonymous> (node_modules/@solana/web3.js/lib/index.cjs.js:15:21)
      at Object.<anonymous> (node_modules/@moralisweb3/sol-utils/src/dataTypes/SolAddress/SolAddress.ts:2:1)
      at Object.<anonymous> (node_modules/@moralisweb3/sol-utils/src/dataTypes/SolAddress/index.ts:1:1)
      at Object.<anonymous> (node_modules/@moralisweb3/sol-utils/src/dataTypes/index.ts:1:1)
      at Object.<anonymous> (node_modules/@moralisweb3/sol-utils/src/index.ts:1:1)
      at Object.<anonymous> (node_modules/@moralisweb3/auth/src/methods/requestMessage.ts:1:1)
      at Object.<anonymous> (node_modules/@moralisweb3/auth/src/MoralisAuth.ts:2:1)
      at Object.<anonymous> (node_modules/@moralisweb3/auth/src/index.ts:1:1)
      at Object.<anonymous> (node_modules/moralis/src/index.ts:3:1)
      at Object.<anonymous> (components/blockchain-info/index.tsx:12:55)
      at Object.<anonymous> (pages/index.tsx:10:62)
      at Object.<anonymous> (__tests__/index.test.tsx:7:53)

Below is the setup of config in jest.config.js:

// jest.config.js
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  transformIgnorePatterns: ['node_modules/(?!uuid)/'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

Below is the test file for index.test.tsx:

import { render } from '@testing-library/react';
import Home from 'pages/index';
import '@testing-library/jest-dom';

describe('Home', () => {
  it('renders homepage unchanged', () => {
    const { container } = render(<Home />);
    expect(container).toMatchSnapshot();
  });
});

On running the test file, the below error occurs:

Details:

    /Users/abhajan/Work/Tusk/tusk-app/node_modules/uuid/dist/esm-browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

Not sure if the regex pattern in transformIgnorePatterns is correct or not. Any kind of help is appreciated :)

[icyJoseph]

Mmm could you try with adding this to jest.config.js:

module.exports = async (...args) => {
    const fn = createJestConfig(customJestConfig);
    const res = await fn(...args);

    res.transformIgnorePatterns = res.transformIgnorePatterns.map((pattern) => {
        if (pattern === '/node_modules/') {
            return '/node_modules(?!/next)/';
        }
        return pattern;
    });

    return res;
};

[andarocks]

This didn't work either

[icyJoseph]

Did you add web3 to the regex? ` return '/node_modules(?!/next|web3)/';

[andarocks]

Shouldn't it be uuid instead of web3? The below error is occuring from node_modules/uuid:

    /Users/abhajan/Work/Tusk/tusk-app/node_modules/uuid/dist/esm-browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

Anyway, I tried web3 and uuid, none worked.

[andarocks]

I just realized that this library is not getting transpiled from ES5 to commonJS, hence the isssue.🤦🏻

If we add '^uuid$': require.resolve('uuid') in moduleNameMapper, this gets resolved.

[icyJoseph]

Please document what you did on a separate comment and mark it as answer. Well done!

[andarocks]

The below config will resolve the issue in jest.config.js:
In customJestConfig object, add the following property:

moduleNameMapper: {
    '^uuid$': require.resolve('uuid'),
  },

[Diabl0570]

For me this seems to work:

moduleNameMapper: {
    '^@firebase/app': require.resolve("@firebase/app"),
    '^@firebase/firestore': require.resolve("@firebase/firestore"),
    '^@firebase/util': require.resolve("@firebase/util")
}

[nikola96gospodinov]

That didn't solve it, unfortunately. Still have the issue even when I do:

 moduleNameMapper: {
        '^@firebase/app': require.resolve('@firebase/app'),
        '^@firebase/firestore': require.resolve('@firebase/firestore'),
        '^@firebase/util': require.resolve('@firebase/util'),
        '^@firebase/auth': require.resolve('@firebase/auth')
    }

[andarocks]

Trying doing this? '^@firebase\/app': require.resolve('@firebase/app')

The regex is ignoring the forward slash...

[nikola96gospodinov]

@andarocks that didn't work either. I am still getting the exact same error.

[Egor-oop]

I had this issue with react-syntax-highlighter. I resolved it by doing

moduleNameMapper: {
  'react-syntax-highlighter': require.resolve('react-syntax-highlighter'),
},