jest config is package json
"jest": { "preset": "react-native", "setupFiles": [ "<rootDir>/jestSetup.js" ], "collectCoverage": true, "transform": { "^.+\\.(ts|tsx|js|jsx)$": "ts-jest" }, "transformIgnorePatterns": [ "/node_modules/(?!(#react-native|react-native)/).*/" ] },
babel config is babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };
I tried to search for it on google but nothing similar. I managed to get rid of the error with a fix for another error but then the "other" error came and I already had the fix.
Do you guys encountered this issue, or do you have any idea how to solve it?
I also tried to create some simple tests and jest is working, but when I use it on the whole app I get this error
I fixed something similar by adding this to jest.config.js
transformIgnorePatterns: [
"node_modules/(?!(#react-native|react-native|react-native-modal|react-native-config|react-native-animatable|#balance-inc)/)"
]
Related
I am getting the following error when I run jest. It looks like the cause is Typescript-related but I have some typescript handling in the package.json, so I'm not sure why it wouldn't be handled.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
...
Details:
/Users/ryancocuzzo/ex/test/example/mobile-app/node_modules/react-native-fs/FS.common.js:30
var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
^
SyntaxError: Unexpected token ':'
> 1 | import RNFS from "react-native-fs";
The library in question is react-native-fs.
package.json:
"jest": {
"preset": "react-native",
"setupFiles": [
"./setupTests.js",
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transform": {
"^.+\\.ts?$": "ts-jest",
"^.+\\.tsx?$": "ts-jest",
"^.+\\.js$": "./node_modules/react-native/jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"moduleNameMapper": {
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
}
}
Info:
react: 17.0.1
react-native: 0.64.1
react-native-fs: 2.18.0
ts-jest: 27.1.3
jest: 26.6.3
babel-jest: 26.6.3
Did you take a look at here ? Also related issue.
A workaround could be adding react-native-fs to the transformIgnorePatterns.
Use the <rootDir> string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories.
You also need to set the test environment for your react-native tests. so that it mimics the environment of a React Native app as it doesn't load any DOM or browser APIs, which would greatly improves Jest's startup time.
{
//...
"testEnvironment": "node",
"transform": {
"^.+\\.ts?$": "ts-jest",
"^.+\\.tsx?$": "ts-jest",
// use <rootDir> absolute path here
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
}
I'm suddenly getting this error in my code. I can't pinpoint what caused it, because when I went to bed it was working. When I started again in the morning, I suddenly got this error message:
abi35_0_0.com.facebook.react.common.javascriptexception: require is not defined
My project is fairly new, and I have mostly just been scaffolding. There is not much to show, but I have commented out any code that could potentially cause issue. I even went so far as to go back 3 or so commits, when the app was 100% working properly, yet the issue persists.
Digging around online suggests that babel may contain the issue, so here is my .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
],
"#babel/preset-react"
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"extensions": [
".ios.js",
".android.js",
".js",
".json"
]
}
],
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-export-default-from"
]
}
and babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
It's been several hours of scouring the internet for a solution, and I feel progress has stopped. Any help on this issue would be greatly appreciated.
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
When I try to use $ReadOnlyArray, eslint shows error that "$ReadOnlyArray is not defined (no-undef)". I might have a wrong configuration but I don't know where to start.
Here are some env info:
react-native: 0.51.0
flow: 0.57
eslint: 4.9.0,
eslint-plugin-flow: 6.23.0
You will need to install Flow type linting rules as follows:
npm install eslint-plugin-flowtype --save-dev
and your .eslintrc file should look something like this:
{
"parser": "babel-eslint",
"env": {
},
"plugins": [
"flowtype"
],
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"rules": {
}
}
I have been trying to solve this problem since some days so any help is welcome
When testing my React Native app with Jest, I get the following error with the victory-native package:
SyntaxError: Unexpected token import
I visited many issues and questions which all seem to solve this problem by using the transformIgnorePatterns key for the jest config
The problem is when i use that, I get another error :
TypeError: Cannot set property '_currentElement' of undefined
Jest config
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|victory-native)/"
]
},
Babel
{
"presets": ["react-native"],
"sourceMaps": true,
"env": {
"test" : {
"presets": ["react-native"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
RN Version: 0.46.2
Jest Version: ^20.0.4
Test command: NODE_ENV=test jest --no-cache
I am completely clueless about this now so any tips or hints would also do.
Thanks in advance!