Failing jest unit test due to import statement in sgds node module

[suenalaba]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have read the contributing guidelines

Describe the issue

Issue: When running jest unit tests:the following error occurs: Cannot use import statement outside a module

How to reproduce? Using import statement like this in my component: import { Card } from '@govtechsg/sgds-react/Card';

However, if we import the Card Component for example like this: import { Card } from '@govtechsg/sgds-react'; The error goes away.

Both imports should be expected to work but it is not behaving as expected. The reason for wanting the import path as: import { Card } from '@govtechsg/sgds-react/Card'; is to reduce the bundle size.

Dependencies:

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-react are you using? CSR or SSR?

"react": "^18", "@govtechsg/sgds-react": "^2.2.2"

[clukhei]

Hello @suenalaba , thanks for raising this.

Jest support for esm is still experimental. Thus, there needs to be some configuration on your end in the jest.config.js file.

In your jest.config.js file, in transformIgnorePatterns field ,change/node_modules/ to this

transformIgnorePatterns: [
    "/node_modules/(?!(@govtechsg/sgds-react)/)",
  ]

It means don't transform all of node_modules packages except @govtechsg/sgds-react. Let me know if this works for you :)

If you try out Jest experimental mode and it works , do share it here !

[suenalaba]

We tried this method, however it doesn't work as well. The only way we made it work is by importing import { Card } from '@govtechsg/sgds-react'; instead of import { Card } from '@govtechsg/sgds-react/Card';

[clukhei]

@suenalaba I have replicated the issue here and fixed it with same jest config and using import { Card } from '@govtechsg/sgds-react/Card'.

EDIT: codesandbox link for easier viewing You can pull down this repo run test to try and see what's the difference to debug. Im using NEXT + JEST + babel https://github.com/clukhei/stackblitz-next-jest

if you still cannot make it work, do provide me with a minimal reproducible repository.

[suenalaba]

We use next/jest to inject our next.config.js and .env into our test environment. However this causes the transform patterns to be overwritten, instead of extending it. Which causes the above method not to work. We got it to work with nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!(@govtechsg/sgds-react)/)'; instead.