I have read many of the questions similar to mine, but none seem to fix my issue. I am using Vue3, TypeScript, Jest, and D3 v7. When I try to import * as d3 from "d3"; I get this error in my tests:
({"Object.<anonymous>":
function(module,exports,require,__dirname,__filename,global,jest)
{export * from "d3-array";
This error also occurs when I import d3 as such import { BaseType, Selection, Transition, select } from "d3";
I have tried updating my jest config's transformIgnorePatterns property to read but this doesn't work either:
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!d3-(array))",
]
Could someone explain to me the piece I am missing here? Also below is my entire jest.config.js file
module.exports = {
collectCoverageFrom: [
"**/src/**.ts",
"**/src/**/**.ts",
"!**/dist/**",
"!**/node_modules/**",
"!**/public/**"
],
errorOnDeprecated: true,
preset: "@vue/cli-plugin-unit-jest/presets/typescript",
testMatch: ["**/*.spec.ts", "!**/node_modules/**"],
testPathIgnorePatterns: ["<rootDir>/dist/", "<rootDir>/node_modules/"],
"modulePaths": [
"<rootDir>"
],
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!d3-(array))",
],
transform: {
"^.+\\.ts": "ts-jest",
"^.+\\.vue$": "vue-jest",
},
};
A quick fix is to use the minified d3 build, which is already transpiled. Either import the minified build directly:
import * as d3 from 'd3/dist/d3.min'
Or use a Jest config to map d3 to the minified build:
// jest.config.js
module.exports = {
moduleNameMapper: {
'^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
},
}
If that's not an option, you can configure Jest to transpile d3 (and its dependencies that also require transpilation: internmap, delaunator, and robust-predicates):
// jest.config.js
module.exports = {
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!d3|internmap|delaunator|robust-predicates)'
],
}
Note: The transpilation adds considerable time to the test run.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments