jest/react testing library issue with importing module (typescript)

Question

I have the following error that cannot be solved even after changing my jest.config.js file. The error says:

 Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/.../node_modules/@my-cool-package/fcm/dist/esm/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { registerPlugin } from "@capacitor/core";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | /* eslint-disable @typescript-eslint/no-unsafe-call */
      2 | /* eslint-disable @typescript-eslint/no-unsafe-member-access */
    > 3 | import { FCM } from '@my-cool-package/fcm'
        | ^
      4 | import { App } from '@capacitor/app'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/core/services/PushNotificationService.ts:3:1)

And here's my jest.config.js file:

module.exports = {
  roots: ['./src'],
  transform: {
    '^.+\\.(ts|js)x?$': 'ts-jest',
  },
  testPathIgnorePatterns: [
    '/node_modules/(?!@my-cool-package/)',
    '/src/context/__mocks__',
  ],
  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  modulePaths: ['<rootDir>'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  moduleNameMapper: {
    '^me/(.*)': '<rootDir>/src/me/$1',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/assetsTransformer.js',
    '\\.(css|less)$': 'identity-obj-proxy',
    '^@src(.*)$': '<rootDir>/src$1',
  },
}

Any suggestion for how to fix this?

Toni Bardina Comas · Accepted Answer · 2022-06-24 08:34:07Z

1

The issue is here If you are trying to use ECMAScript Modules.... To avoid this problem you can transform the content to a version of JS jest friendly by doing:

{...}
transformIgnorePatterns: [
    'node_modules/(?!(@my-cool-package)/)',
  ],
{...}

This way you are telling jest to transform also these library files before testing.

answered Jun 24, 2022 at 8:34

Toni Bardina Comas

1,8081 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sabbir Ahmed Over a year ago

I have already configured testPathIgnorePatterns in my jest config. It doesn't seem to solve my problem for some strange reason.

Toni Bardina Comas Over a year ago

Hey @SabbirAhmed, testPathIgnorePatterns and transformIgnorePatterns are not the same thing.

Sabbir Ahmed Over a year ago

Ah, thanks for pointing that out. It seems to be working now.

Collectives™ on Stack Overflow

jest/react testing library issue with importing module (typescript)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related