nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Testing ArcGIS for Javacript React components using Jest

craragon77

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

Finde mehr Beiträge mit dem Tag

Accepted answers

AndyGup

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

All comments

AndyGup

Hi@MajidH there currently no plans to add official ESM (@arcgis/core) unit testing examples.

Can you share a simple github repo, stackblitz or codesandbox? Then anyone on this thread can try to repro with all dependencies, configuration, usage patterns, etc.

MajidH

Hello @AndyGup ,

I was wondering if you have any plans for adding `jest` tests to this repository.

like simply if I try to mock these three modules together

jest.mock("@arcgis/core/Map");
jest.mock("@arcgis/core/views/MapView");
jest.mock('@arcgis/core/layers/FeatureLayer');

Later I get this error

But if I change mocking to this:

jest.mock("@arcgis/core/Map");
jest.mock("@arcgis/core/views/MapView");

It will work.

220407374-809aade6-41ec-4006-96ad-9edfffae9383.png

Wale

Hi @Chris , @MatthieuBrisset , were you able to find a solution?

I have the same problem. I have also tried the proposed solution but that doesn't work.

AndyGup

@DanielFrunza Try removing the following line from \node_modules\@arcgis\core\package.json and then try again:

"crypto": false,

DanielFrunza

Here is the entire trace...

DanielFrunza

I am using Angular 13 and Jest 27 within a library inside an Nx workspace. The entire workspace is made only with Angular 13 and there is nothing related to React...

AndyGup

@DanielFrunzaare you using React or Angular? Crypto error sounds like React, and if that's the case here's a link to a repo that was mentioned above that might help you out: https://github.com/defiantgoat/esri-react-typescript

DanielFrunza

I'm using exactly your configuration in my project and I am getting the following error:

ReferenceError: crypto is not defined

on this line:

const view = new MapView({

Do you know what am I missing?

AndyGup

For those coming across this issue that are using Angular, I updated my example repo to Angular 13 and Jest 27: https://github.com/andygup/angular-jsapi-jest. Jest v27 + jest-preset-angular v11 supports a bunch of file types out-of-the-box: ts, html, js, json and mjs. To get the sample working, my jest config was minimal (see package.json).

MatthieuBrisset

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

defiantgoat

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

EmreCan

@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?

AndyGup

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

EmreCan

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

MatthieuBrisset

@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)

AndyGup

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

MatthieuBrisset

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

AndyGup

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

cc @Anonymous User

MatthieuBrisset

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 ?

AndyGup

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.

craragon77

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

AndyGup

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.

craragon77

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?

AndyGup

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.

craragon77

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

craragon77

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

AndyGup

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.