Update: This post has undergone multiple edits, please refer to this new Stackoverflow post for a clearer explanation of the issue: SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial
I have been searching through countless posts and threads but still can't resolve my problem. I followed the "Getting started" sections of both Jest and Mocha tutorials and encountered the same error each time:
SyntaxError: Cannot use import statement outside a moduleAt the end of this post, you will find steps for setting up a clean project with Jest for testing which unfortunately resulted in an error.
"vue-jest": "^3.0.7""vue": "^2.6.12""@vue/test-utils": "^1.2.2"package.json
"mocha": "mocha 'tests/Frontend/**/*.test.js'"
example.test.js:
import { mount } from "@vue/test-utils"
import Dashboard from "../../resources/js/views/Dashboard";
import * as assert from "assert";
describe('test example', () => {
it('should work', () => {
assert.equal([1, 2, 3].indexOf(4), -1); // doesn't matter what I do here
})
})
What I've attempted:
- Using the
--require @babel/registerflag with mocha - Setting
to allow all node_modules to be considered"transformIgnorePatterns": [] - Adding a
.babelrcfile with specified content, resulting in an error during app build:
Error: Multiple configuration files found. Please remove one:
- package.json
- C:\Users\f.marchi\workspace\projects\sanctum-test\.babelrc
{
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
Do the documentation miss crucial details? I am unsure of where I could be going wrong as I am strictly following the guidelines.
Update: jest.config.js:
module.exports = {
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
moduleFileExtensions: [
"js",
"json",
"vue"
],
transform: {
".*\\.(vue)$": "vue-jest"
},
transformIgnorePatterns: []
};
Update: I have retried the setup process, feel free to follow along:
- vue create jest-test
- npm install --save-dev jest @vue/test-utils vue-jest
- Added jest config to package.json:
{
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest"
}
}
}
- npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0
- Adjusted jest config to:
{
"jest": {
"transform": {
// process `*.js` files with `babel-jest`
".*\\.(js)$": "babel-jest" //<-- changed this
}
}
}
- Adjusted babel config to:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
'@babel/preset-env' //<-- added this
]
};