Atlaskit packages in node_modules
are causing Jest to fail in ejected create-react-app. I only have the default App.test.js
file so far and receive a SyntaxError: Unexpected token export
from @atlaskit/dropdown-menu
.
I have looked all over the different questions on StackOverflow and Github Issues, and while the standard answer everyone keeps suggesting to try is to focus on transformIgnorePatterns
in the Jest config, nothing I've tried seems to do the trick, so it may be a separate issue.
In package.json
my current Jest configuration is as follows. It's the default configuration that shows up after ejecting:
package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
I have also removed the babel
configurations and eslint
out of package.json
and into their own separate files.
.babelrc.js
const plugins = [
[
"module-resolver",
{
root: [
"."
],
alias: {
atoms: "./src/components/atoms",
molecules: "./src/components/molecules",
organisms: "./src/components/organisms",
pages: "./src/components/pages"
}
}
]
]
module.exports = {
env: {
development: {
presets: ["react-app"],
plugins,
},
local: {
presets: ["react-app"],
plugins,
},
qa: {
presets: ["react-app"],
plugins,
},
stage: {
presets: ["react-app"],
plugins,
},
production: {
presets: ["react-app"],
plugins,
},
test: {
presets: [
["react-app",
{ 'preset-env': {
'modules': 'commonjs'
}}
]
],
plugins,
}
}
}
.eslintrc.json
{
"extends": ["standard", "standard-react"],
"env": {
"browser": true,
"es6": true,
"jest": true
},
"plugins": [
"standard",
"react"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"javascript": true,
"modules": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I expect, that when npm run test
is called, that all node_modules
and not just @atlaskit
related ones will be properly transformed into code that doesn't cause Jest failures.