PaulLeCam
commented
2 years ago v4 exports ES modules, you need to configure Jest accordingly, see https://jestjs.io/docs/ecmascript-modules
Closed SwedishBarbarossa closed 2 years ago
PaulLeCam
commented
2 years ago v4 exports ES modules, you need to configure Jest accordingly, see https://jestjs.io/docs/ecmascript-modules
slutske22
commented
2 years ago @SwedishBarbarossa did you figure out a solution for this? I am struggling to get this working
SwedishBarbarossa
commented
2 years ago @slutske22 nah, just disabled the tests of modules importing the map for now. In last stretch before publishing a product, so these tests take a back seat.
gustavoalvesleao
commented
2 years ago @slutske22 did you figure out?
slutske22
commented
2 years ago @gustavoalvesleao I screwed around alot with various versions of jest and babel, as well as with a million different ways to configure babel, typescript, and jest. Ultimately I got something working. I don't remember exactly what I did, but you can take a look at my setup for the repo I was testing in here: https://github.com/slutske22/react-esri-leaflet
It was sort of a whirlwind, and what I think I came up with in the end was adding this to package.json:
"jest": {
"transform": {
"\\.js$": [
"ts-jest"
]
},
"preset": "ts-jest",
"testEnvironment": "jsdom",
"transformIgnorePatterns": [
"node_modules/(?!react-leaflet)/"
]
}And in my tsconfig:
{
"compilerOptions": {
"moduleResolution": "node",
"target": "ES2020",
"allowJs": true,
"module": "esnext",
"declaration": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
"outDir": "build",
"lib": ["dom", "esnext"],
"esModuleInterop": true
},
"exclude": ["node_modules", "examples"]
}I can't remember what other changes I kept or ditched, but check out that repo and mind the package versions, and .babelrc (Which has a lot in there for other reasons).
gustavoalvesleao
commented
2 years ago @slutske22 thank you. I got different errors, but I'll try to continue from here.
Update**: In the end all I had to do was to add in my package.json:
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!react-leaflet)/"
]
}My app was built with the default create-react-app.
AurinoJunior
commented
2 years ago @slutske22 thank you. I got different errors, but I'll try to continue from here.
Update**: In the end all I had to do was to add in my package.json:
"jest": { "transformIgnorePatterns": [ "node_modules/(?!react-leaflet)/" ] }My app was built with the default create-react-app.
I have the same problem but this solution didn't work for me, does anyone have another tip?
albjeremias
commented
1 year ago this bug is ridiculous.. doesnt make sense.. any cool fork?
gsehrlich
commented
1 year ago @slutske22 thank you. I got different errors, but I'll try to continue from here. Update**: In the end all I had to do was to add in my package.json:
"jest": { "transformIgnorePatterns": [ "node_modules/(?!react-leaflet)/" ] }My app was built with the default create-react-app.
I have the same problem but this solution didn't work for me, does anyone have another tip?
It didn't work for me either (also create-react-app). I needed to add @react-leaflet as well (thanks to this answer):
"jest": {
"transformIgnorePatterns": ["/node_modules/(?!react-leaflet|@react-leaflet)"]
}@slutske22 Thanks, your answer got me going in the right direction.
doougui
commented
1 year ago I tried this but still got the same error. My jest.config file looks like this:
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './'
})
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
testEnvironment: 'jest-environment-jsdom',
testPathIgnorePatterns: ['/node_modules/', '/.next/'],
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.ts(x)?',
'!src/pages/**/*.tsx',
'!src/styles/**/*.ts',
'!src/types/**/*.d.ts',
'!src/**/mock.ts',
'!src/**/types.ts'
],
setupFiles: ['<rootDir>/.jest/setEnvVars.ts'],
setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
modulePaths: ['<rootDir>/src/', '<rootDir>/.jest'],
moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
'identity-obj-proxy'
},
transformIgnorePatterns: ['/node_modules/(?!react-leaflet|@react-leaflet)']
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)Does anybody have a solution?
doougui
commented
1 year ago I managed to make it work by passing the --transformIgnorePatterns flag directly to my test script. Still unsure why this works, but setting this configuration on my jest.config.js file doesn't.
"scripts": {
...
"test": "jest --transformIgnorePatterns \"node_modules/(?!react-leaflet|@react-leaflet)\"",
"test:watch": "yarn test --watch",
...
},My final jest.config.js looks like this:
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './'
})
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
testEnvironment: 'jest-environment-jsdom',
testPathIgnorePatterns: ['/node_modules/', '/.next/'],
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.ts(x)?',
'!src/pages/**/*.tsx',
'!src/styles/**/*.ts',
'!src/types/**/*.d.ts',
'!src/**/mock.ts',
'!src/**/types.ts'
],
setupFiles: ['<rootDir>/.jest/setEnvVars.ts'],
setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
modulePaths: ['<rootDir>/src/', '<rootDir>/.jest'],
moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
'identity-obj-proxy'
}
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)If anyone knows the reason, please let me know.
The beta works fine in the browser, but Jest does not like it currently.
Bug report
Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.
Please make sure to check the following boxes before submitting an issue.\ Issues opened without using this template will be closed unless they have a good reason not to follow this template.
Expected behavior
Running Jest works out of the box.
Actual behavior
Jest encounters an unexpected token.
Steps to reproduce
Import react-leaflet in file. Import file in test. Run Jest on test.
My setup: