I'm new to Jest and vue-jest. Just trying to get basic tests working.
In my bootstrap.js file (this file will, ideally, be loaded for all tests), I attempt to register the 3rd party component vue-picture-input:
import PictureInput from 'vue-picture-input';
Vue.component('picture-input', PictureInput);
(This is part of a standard file (bootstrap.js) file I use for my entire project.) But Jest gives me the following error:
Details:
/home/vagrant/Code/Patrol/node_modules/vue-picture-input/PictureInput.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
^
SyntaxError: Unexpected token <
85 | // ...
86 |
> 87 | import PictureInput from 'vue-picture-input';
| ^
88 | Vue.component('picture-input', PictureInput);
I've taken a look at similar questions on Stack Overflow for this error, but I can't seem to decipher what is going on or what I need to change. Seems like this answer addresses a similar issue, but I don't know how to adapt the solution for this particular issue (or if it's even close, to be honest).
Currently, the "jest" section of my package.json file reads:
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"\\.(css|scss|sass|less)$": "<rootDir>/tests/js/config/cssLoader.js"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
}
}
Not sure where to go from here...
Update: Found the solution on Github.
The solution was to add the following snippet to package.json in the "jest" section:
"transformIgnorePatterns": [
"node_modules/(?!vue-picture-input)"
]
Now it works fine.
I was just getting this error because I accidentally put a . on the beginning of my jest.config.js file, so Jest was forgetting the transform mappings:
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': 'vue-jest',
},'
In this case, the config file wasn't registered properly but did exist.
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 using Jest as a test runner in a Vue 3 project that makes use of the #vueform slider plugin:
https://github.com/vueform/slider
the code in #vueform/slider/dist/slider.js:1 tiggers a "SyntaxError: Cannot use import statement outside a module" error.
I've tried adding a "transformIgnorePatterns" entry in the package.json's Jest configuraiton:
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.(vue)$": "vue3-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!#vueform/slider/)", "node_modules/(?!#vueform/)"]
}
I Also added "type": "module" to package.json
And tried changing
import SliderPrice from "#vueform/slider"
to
const SliderPrice = require("#vueform/slider")
Still getting the same error!
Any ideas how I can solve this issue? I can't test anything with Jest until this error gets sorted.
Edit:
I forgot to add this: Intially, the error message details included the entire (minimized) slider.js file. After adding "type": "module" to package.json the details now include just this line:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";
Edit 2:
My babel config is in a .babelrc file:
{
"presets": ["#babel/preset-env"]
}
Vue is the front end setup within a Laravel application, but the webpack.mix.js configuration file doesn't use babel.
Edit 3:
After a few more hours of playing around with the settings, I believe that this is Babel related:
If I delete my .babelrc file then I start getting the "SyntaxError: Cannot use import statement outside a module" error for my own .vue files. This shows that with the .babelrc file, my ES6 javascript files are being transformed to ES5.
So the Vue plugins, like #vueform/slider/ are NOT being transformed to ES5 by Babel, even though the correct path is defined in "transformIgnorePatterns"
For vue3 and 2 (I didn't test it on 2 but should work)
npm i -D #babel/preset-env babel-jest
babel.config.js
{
"presets": ["#babel/preset-env"]
}
I have had issues also with vue files. Below my configuration works ok.
npm i -D #vue/vue3-jest # or 2 if you are on second version
jest.config.js
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.[t|j]sx?$': 'babel-jest',
'^.+\\.vue$': '#vue/vue3-jest',
},
}
I am trying to get my first Jest Test to pass with React and Babel.
I am getting the following error:
SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token
> 7 | #import '../variables.css';
| ^
My package.json config for jest look like this:
"babel": {
"presets": [
"es2015",
"react"
],
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
},
"jest": {
"moduleNameMapper": {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
},
"testPathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"verbose": true,
"modulePathIgnorePatterns": [
"rpmbuild"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/core-js"
]
},
So what am I missing?
moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.
Create a file like this in your project (you can use a different name or path if you’d like):
config/CSSStub.js
module.exports = {};
This stub is the module we will tell Jest to use instead of CSS or Less files. Then change moduleNameMapper setting and add this line to its object to use it:
'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'
Now Jest will treat any CSS or Less file as a module exporting an empty object. You can do something else too—for example, if you use CSS Modules, you can use a Proxy so every import returns the imported property name.
Read more in this guide.
I solved this by using the moduleNameMapper key in the jest configurations in the package.json file
{
"jest":{
"moduleNameMapper":{
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
After this you will need to create the two files as described below
__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:
{
"jest":{
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}
But you will need to install identity-obj-proxy package as a dev dependancy i.e.
yarn add identity-obj-proxy -D
For more information. You can refer to the jest docs
UPDATE who use create-react-app from feb 2018.
You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about this why it does.
So my jest.config.js look like this:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and #import quite well.
Backing my answer i followed jest webpack
Similar situation, installing identity-object-proxy and adding it to my jest config for CSS is what worked for me.
//jest.config.js
module.exports = {
moduleNameMapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};
The specific error I was seeing:
Jest encountered an unexpected token
/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^
SyntaxError: Unexpected token .
1 | import React from 'react';
> 2 | import styles from './styles.css';
If you're using ts-jest, none of the solutions above will work! You'll need to mock transform.
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: [
"<rootDir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
'.(css|less)$': '<rootDir>/jest-config/style-mock.js'
},
};
file-mock.js
module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};
style-mock.js
module.exports = {
process() {
return 'module.exports = {};';
}
};
I found this working example if you want more details.
Solution of #import Unexpected token=:)
Install package:
npm i --save-dev identity-obj-proxy
Add in jest.config.js
module.exports = {
"moduleNameMapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}
Update: Aug 2021
If you are using Next JS with TypeScript. Simply follow the examples repo.
Else you will be wasting days configuring the environment.
https://github.com/vercel/next.js/tree/canary/examples/with-jest
I added moduleNameMapper at the bottom of my package.json where I configured my jest just like this:
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
}
}
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
};
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!