topic Re: Testing ArcGIS for Javacript React components using Jest in ArcGIS JavaScript Maps SDK Questions

Testing ArcGIS for Javacript React components using Jest

craragon77 — Fri, 09 Jul 2021 14:42:09 GMT

Hello all,

I'm encountering a weird error when I try to use Jest to test my react components which contain ArcGIS maps. I'm attempting to make a simple smoke screen test for a component which contain an ArcGIS map, but I always get this error from Jest saying "Jest encountered an unexpected token", meaning that Jest cannot read it. This error appears in every component with the arcGIS map in its ancestry. For example, I am getting an instance of the error from the App component because it's importing a child component which itself hosts an arcGIS map. I understand that ArcGIS uses Intern for its testing, but I'm not trying to test the source code, just the React components (which I wrote) where the ArcGIS maps live. I am using React 17.0.1, and I am using the @arcgis/core package (version 14.8.1) to make the maps. Can I get a second set of eyes on this? It's really T-Boning my tests 😕

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Fri, 09 Jul 2021 14:55:26 GMT

Hi @craragon77 Try setting jest to ignore the @arcgis/core modules, for example: https://github.com/andygup/angular-jsapi-jest/blob/main/jest.config.js#L4

Re: Testing ArcGIS for Javacript React components using Jest

craragon77 — Fri, 09 Jul 2021 17:10:54 GMT

Hi @AndyGup, that worked like a chart. I attached a jest object to the package.json file and pasted the content from the link you send into it. Thanks a bunch

Re: Testing ArcGIS for Javacript React components using Jest

craragon77 — Mon, 30 Aug 2021 18:47:49 GMT

Hi @AndyGup so the solution that you posed worked really well until today when I started seeing the same error again, but this time in the parent component instead of the components where the arcGIS elements live. I have snippet you posted earlier, but am I missing anything else? The testing framework is the same as before, which I have described above.

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Fri, 03 Sep 2021 14:38:20 GMT

Hi @craragon77 okay, it's failing on calcite-components, did you add those recently? Those are not part of @arcgis/core. My best guess is you'll need to ignore those as well.

Re: Testing ArcGIS for Javacript React components using Jest

craragon77 — Wed, 15 Sep 2021 15:14:47 GMT

hi @AndyGup what needs to be added to the jest config file to enable ignoring calcite-components? is there an example you can point me to?

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Wed, 15 Sep 2021 18:53:49 GMT

I'm guessing you'll need to add a regex check to this line for @esri, following a pattern similar to what I did for @arcgis: https://github.com/andygup/angular-jsapi-jest/blob/main/jest.config.js#L4.

Re: Testing ArcGIS for Javacript React components using Jest

craragon77 — Tue, 21 Sep 2021 13:39:10 GMT

hmm, this is interesting. i'm trying to figure out how to enable jest to ignore esri and arcgis components. I attached this (see below) to the config file but i'm still getting the same error listed above (can't run test cause Jest encountered an unexpected token). I've also tried using other arguments in the config file, such as modulePathIgnorePatterns, but that breaks the testing framework because apps made with 'create react app' cannot use it (see screenshot). I think the issue will resolve itself once we can enable the testing framework to ignore the arcgis + esri node modules, but I can't figure out how to do it. got any tips?

"transformIgnorePatterns": [ "node_modules/(?!@arcgis)", "node_modules/(?!@esri)" ]

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Tue, 21 Sep 2021 15:15:56 GMT

Hi Chris, interesting indeed. The only other thing I can think of would be looking into your babel config. Here's what I have https://github.com/andygup/angular-jsapi-jest/blob/main/babel.config.js. Maybe double check what's correct for React.

Re: Testing ArcGIS for Javacript React components using Jest

MatthieuBrisset — Tue, 30 Nov 2021 12:55:15 GMT

Hello,

Did you find a solution ? I have the same problem :

I am using the latest 4.21 version of the API. For the unit test, I'm using Jest with the ts-jest preset.
Here is my jest config :

"jest": { "preset": "ts-jest", "roots": [ "<rootDir>/src" ], "testMatch": [ "**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)" ], "transform": { "^.+\\.(ts|tsx)$": "ts-jest" } }

I tried the proposed solution above with the parameters "transformIgnorePatterns" but I still got the same error.

Any clues ?

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Thu, 02 Dec 2021 17:31:35 GMT

@MatthieuBrissetcan you provide a simple github repo? That will be the easiest way to troubleshoot.

cc @Anonymous User

Re: Testing ArcGIS for Javacript React components using Jest

MatthieuBrisset — Mon, 06 Dec 2021 15:31:56 GMT

Hello @AndyGup

Thank you for your answer.

Here is a minimal application with our full Webpack and Jest config and which reproduces the error.

https://github.com/mattoche/arcgis-unit-testing

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Tue, 07 Dec 2021 00:42:04 GMT

@MatthieuBrisset your repo doesn't seem to have jest.config.js and babel.config.js? There are also a bunch of dependencies in there that may/may-not affect something. One recommendation is use one of our repos as a starting point because they have minimal dependencies: https://github.com/Esri/jsapi-resources/tree/master/esm-samples.

Re: Testing ArcGIS for Javacript React components using Jest

MatthieuBrisset — Tue, 07 Dec 2021 09:46:58 GMT

@AndyGupThe babel and jest configuration are embedded in the package.json (search for tag "babel" and "jest")

This repo https://github.com/Esri/jsapi-resources/tree/master/esm-samples/webpack has been used to initialize the projet but we add bunch of dependencies since (linter, prettier, minifier, etc)

Re: Testing ArcGIS for Javacript React components using Jest

EmreCan — Wed, 08 Dec 2021 10:43:23 GMT

I face the same problem with version 4.21 and Angular 12.

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Wed, 08 Dec 2021 15:32:17 GMT

@EmreCanhere's an example for Angular 11 + Jest: https://github.com/andygup/angular-jsapi-jest

Re: Testing ArcGIS for Javacript React components using Jest

EmreCan — Wed, 08 Dec 2021 19:54:12 GMT

@AndyGup I cloned the repo and tried again but I'm getting the same error "Cannot use import statement outside a module".
Can u please test it again?

Re: Testing ArcGIS for Javacript React components using Jest

AndyGup — Thu, 09 Dec 2021 16:38:10 GMT

@EmreCan @MatthieuBrisset Ah yes, I blew away my old node_modules and package-lock. When I reinstalled I see the problem, a dependency update changed something and I'm not sure why it doesn't work now. It will take some time to research. Hopefully it's just a configuration issue.

Re: Testing ArcGIS for Javacript React components using Jest

defiantgoat — Sun, 12 Dec 2021 23:23:29 GMT

This worked for me in my jest.config.js:

"transform": { "^.+\\.(js|jsx|ts|tsx)?$": "ts-jest" }, "transformIgnorePatterns": [ "node_modules/(?!(@arcgis|@esri|@stencil)/)" ],

I also added allowJS: true to my tsconfig file and just allowed ts-jest to transform everything rather than adding babel in.

This is the sample codebase > https://github.com/defiantgoat/esri-react-typescript

Re: Testing ArcGIS for Javacript React components using Jest

MatthieuBrisset — Mon, 13 Dec 2021 10:34:41 GMT

Thanks !!!
It works as expected by adding allowJS : true.