Testing ArcGIS for Javacript React components using Jest

2146
31
Jump to solution
07-09-2021 07:42 AM
ChrisAragon
New Contributor II

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 :\

Screen Shot 2021-07-09 at 10.36.01 AM.png

Tags (3)
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor
31 Replies
AndyGup
Esri Regular Contributor

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

ChrisAragon
New Contributor II

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

0 Kudos
ChrisAragon
New Contributor II

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. Screen Shot 2021-08-30 at 2.41.37 PM.png

0 Kudos
AndyGup
Esri Regular Contributor

Hi @ChrisAragon 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. 

0 Kudos
ChrisAragon
New Contributor II

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?

0 Kudos
AndyGup
Esri Regular Contributor

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.

 

0 Kudos
ChrisAragon
New Contributor II

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)"
    ]

 

Screen Shot 2021-09-21 at 9.37.27 AM.png

 

0 Kudos
AndyGup
Esri Regular Contributor

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.

0 Kudos
MatthieuBrisset
New Contributor II

Hello,

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

jest_error.PNG

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 ?

0 Kudos