Using certain components hangs react-scripts test

[NikhilNanjappa]

Hi Andy,

When running my jest tests, the test which uses components like Tabs, Header, Accordion etc fails with the following error:

You need to run with a version of node that supports ES Modules in the VM API.

      at invariant (node_modules/jest-runtime/build/index.js:2440:11)
      at _callee$ (node_modules/govuk-react-jsx/govuk/components/tabs/index.js:53:17)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)

My Node version: v17.9.0
My npm version: 8.5.5
govuk-react-jsx: "^7.0.1"

not sure if this will help but all these components have this in common - importing from await import('govuk-frontend/govuk/components/...').

What I've tried

I've followed your solution to a similar problem here - #109 (comment) referring this repo https://github.com/SamChatfield/govuk-react-demo. Added the presets within babel.config.json and added the transformIgnorePatterns etc. Unfortunately it didnt help but rather gave a new error

    SyntaxError: /<path>/currentCases.test.tsx: Missing semicolon. (8:15)

       6 |
       7 | describe('Current cases', () => {
    >  8 |   let container: any = null;
         |                ^
       9 |
      10 |   beforeEach(() => {
      11 |     // setup a DOM element as a render target

      at instantiate (node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
      at toParseError (node_modules/@babel/parser/src/parse-error.js:58:12)
      at Object.raise (node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
      at Object.semicolon (node_modules/@babel/parser/src/parser/util.js:146:10)
      at Object.parseVarStatement (node_modules/@babel/parser/src/parser/statement.js:904:10)
      at Object.parseStatementContent (node_modules/@babel/parser/src/parser/statement.js:391:21)
      at Object.parseStatement (node_modules/@babel/parser/src/parser/statement.js:329:17)
      at Object.parseBlockOrModuleBlockBody (node_modules/@babel/parser/src/parser/statement.js:1082:25)
      at Object.parseBlockBody (node_modules/@babel/parser/src/parser/statement.js:1058:10)
      at Object.parseBlock (node_modules/@babel/parser/src/parser/statement.js:1028:10)

Please let me know if you need anymore details to help narrow down the issue! Your help is very much appreciated!

[andymantell]

transformIgnorePatterns was going to be my suggestion. In a way it's good that that made a difference - shows it's sort of working.

The error you're pointing at though appears to be in your test code. Is this syntax correct? I'm not that familiar with typescript:

let container: any = null;

is that colon suppose to be there after the word container? Assuming it is, is there any additional setup you need to do to get Jest to run tests written in typescript?

[NikhilNanjappa]

Yeah the syntax is correct, variable_name: type is the usual way to declare a variable with a type. eg. name: string.

Regarding jest, im following https://jestjs.io/docs/getting-started#using-typescript and applied all their suggestions.

Something worth mentioning, if I add the transform: {} to jest config along with transformIgnorePatterns, I get a different error:

    import '@testing-library/jest-dom';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

[andymantell]

Is there much "actual" typescript in your tests? Could you make it a normal JS file and see if you can get it running?

[andymantell]

I dunno - I'm just a bit stuck for ideas, without googling it more myself. Your second error just seems to be pointing at the typescript, that's nothing to do with this module. I'm all for helping out where I can, especially if we think this is something wrong with govuk-react-jsx, but I am not best placed to help with general typescript issues as you may have gathered by my ignorance! :-D

[NikhilNanjappa]

I understand Andy :) Just tried my luck to see if yourself or someone you know came across using govuk-react-jsx with typescript

[andymantell]

No worries, and sorry I couldn't be more helpful! Please do post back if you get any further though as it may be a useful reference for anyone encountering similar issues in the future.

Conversely, if you don't make any headway at all, could you stick up a git repository with a minimal reproduction in? I could have a poke at it and see if I can get anywhere.

[NikhilNanjappa]

Yeah, as a matter of fact, I made a headway. I installed and setup the ts-jest package as suggested here https://jestjs.io/docs/getting-started#using-typescript.

However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is purely transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest instead, or just run the TypeScript compiler tsc separately (or as part of your build process).

Jest will not type-check your tests as they are run - this is exactly why I get the error SyntaxError: Missing semicolon

After setting up ts-jest, now Im getting the exact same error as an issue raised here - #107

    /<project_path>/node_modules/govuk-frontend/govuk/assets/images/govuk-logotype-crown.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG


    SyntaxError: Invalid or unexpected token

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at Object.<anonymous> (node_modules/govuk-react-jsx/govuk/components/header/index.js:22:50)

[andymantell]

Are you able to follow the threads in 107? Are you compiling this for serverside or clientside? It'll be to do with whether your setup is able to cope with the png import statements - whether your loaders are configured correctly.

[NikhilNanjappa]

Im using an express app to serve the react app

It'll be to do with whether your setup is able to cope with the png import statements - whether your loaders are configured correctly.

Is there anyway I can confirm this. I dont use webpack or any other loader. Just a standard express app

app.use(express.static(join(__dirname, reactBuildPath)));

[andymantell]

Please see #107 (comment)

This should resolve your issue.

[NikhilNanjappa]

Thanks @andymantell - As fate would have it, just got news that apparently we have to scrap our react project for non-technical reasons :-D

[andymantell]

Wow, that escalated quickly! Well, good luck anyway :-)

[NikhilNanjappa]

haha yeah ... it was an absolute co-incidence (apparently alpha assessment guys dont like react)

[andymantell]

yeah, that's definitely true. It's on my todo list to put a "health warning" at the top of this readme - this comes up in the X-Gov slack regularly. React often isn't the best tool for the job for building progressively enhanced gov services. Certainly inside gov I would reserve it for use cases that explicitly need to be a SPA.

[robValtech]

Hi @andymantell. I am using govuk-react-jsx in a Next 12 environment. I have managed to get past the image loading issue mentioned in #107, and the app renders in SSR and on the client side, however I am struggling to find a solution to get Jest working. Any component that uses anything from govuk-react-jsx just stalls. There are no errors, just grave silence - weirdly not a single console log leaves the tests - not something I've seen before. Any chance you have a possible solution?

[andymantell]

Hi @robValtech, please could you open a new issue so that everyone involved in this thread does not get email notifications, as your issue does not appear to be related to the original one in this thread.

When you do, please could you provide a link to the repository that is not working, or if that's not possible, create a public repo with a minimal reproduction in it. Without this I am unable to diagnose anything really.

"Officially" I don't support this repository any more, but I don't mind having a quick look to see if there's anything obvious.

Also I would encourage you to look at #102 and #103 to see if there's any hints there that might help you - there are various demos linked to from those threads which you could compare to your solution.

Thanks,
Andy

[robpataki]

Hi @andymantell , thanks so much for your reply, I really appreciate it knowing you must be very busy! The issue I'm experiencing is more like the one raised in this thread - Jest stuck on tests in [RUN], and never finish. I've managed to solve the issues already discussed on #102 and #103. I'm happy to open a new issue, with a public repro example. Many thanks.