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 😕

 

[AndyGup]

Oh interesting. Thanks @DanielFrunza I'll take a look.

[AndyGup]

@DanielFrunzaI updated all the dependencies including an update to use jest-preset-angular/presets/defaults-esm: https://thymikee.github.io/jest-preset-angular/docs/guides/esm-support.

That got me beyond the crypto error, but then I ran into a tslib bug that's most likely related to this long outstanding issue that seems to have some new momentum towards a fix: https://github.com/microsoft/tslib/pull/171 This is the error that I'm now seeing:

SyntaxError: The requested module '../chunks/tslib.es6.js' does not provide an export named '_'

I'll take a look again as time permits. In the meantime if you are able to chip away at this, here are some additional resources:

* Some basic guidelines for using jest with esm: https://gist.github.com/rstacruz/511f43265de4939f6ca729a3df7b001c

* A working example of using the jest esm presets for Angular (no ArcGIS) https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13.

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

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

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