Jest fails due to d3 dependencies. Proposed solution based on victory repo

[krisbot01]

Description

When I am running my tests with jest I get the following error:

Must use import to load ES Module: .../node_modules/d3-scale/src/index.js

After digging around it seems to be because the d3-scale dependency have updated to only support ESM.

Proposal

You seem to already have a working solution in the other victory repo by adding a victory-vendor package for the d3 dependencies.

Links / References

I also found this write up that explains the issue better than I can.
https://commerce.nearform.com/blog/2022/victory-esm

[carbonrobot]

You may need to utilize the transformIgnorePatterns option in your Jest configuration. See this thread for more details

[krisbot01]

I don't fully understand the toolchain but I've already tried adding thirdPartyIgnorePatterns and that doesn't solve the problem. It does however work for other node_modules I am ignoring.

[krisbot01]

I found a solution and I'll try my best to describe process.

When installing Skia I used their recommended ESM setup for testing which used Skia's jestSetup.mjs rather than the commonJS jestSetup.js file. To enable ESM support you had to call jest with node --experimental-vm-modules node_modules/.bin/jest and it was this setup which ultimately caused the issue I described at the start of the post.

The solution was to not use ESM but rather use jestSetup.js, call jest normally (without the --experimental-vm-modules flag) and then load the Skia environment by adding this on top of every snapshot file that includes a chart:

/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */

I also had to add victory-native, d3-.* and internmap to transformIgnorePatterns in jest.config.js.

So Skia's recommended settings for testing with jest isn't working with victory-native-xl. I therefor think it would be good to include this in the documentation if it's not possible to make it also work with an ESM setup.