Unable to fix Jest error when creating ApplePay component using AdyenCheckout

[ashrafnazar]

Describe the bug
We are in the process of testing an ApplePay component using Jest, but receive an error when attempting to run the test:

Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Where the source of the error seems to be node_modules/preact/dist/preact.module.js:1

Further messages include:

SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
at Object. (node_modules/@adyen/adyen-web/dist/cjs/index.js:1:2402)

To Reproduce
Steps to reproduce the behavior:

1. Create ApplePay component from Adyen Checkout instance
2. Create test file
3. Run the test
4. See error in the console

Expected behavior
Documentation on how to test such components or a solution to bypass the error.

[ribeiroguilherme]

Hey @ashrafnazar ,

The only thing I can spot from the stacktrace is that Jest is loading the commonjs (cjs) version of the library. Perhaps it should load the one from the es folder?

Regardless, it is likely an issue with your testing setup rather than an issue with the library. I am sorry but we can't assist you with that.

Cheers

[ashrafnazar]

Hi @ribeiroguilherme - we figured it out in the end and the fix was to add '^preact(/(.*)|$)': 'preact$1', to moduleNameMapper in our Jest config file. I believe this will help others, so if this could be included somewhere in your docs, it would be appreciated

[ribeiroguilherme]

Thanks for sharing your fix @ashrafnazar

This is related to your testing setup and it would not make sense for us to add into our documentation. But in case people face this problem in their setup, they can find the answer here in this thread :)

Cheers