Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-jest can't find babel #160

Closed
SuperDJ opened this issue Feb 13, 2019 · 11 comments
Closed

vue-jest can't find babel #160

SuperDJ opened this issue Feb 13, 2019 · 11 comments

Comments

@SuperDJ
Copy link

SuperDJ commented Feb 13, 2019

While trying to test vue components I get the following error:

Cannot find module 'babel-core' at Object. (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15)

package.json:

"devDependencies": {
	"@babel/core": "^7.2.2",
	"@babel/plugin-syntax-dynamic-import": "^7.2.0",
	"@babel/preset-env": "^7.3.1",
	"@vue/test-utils": "^1.0.0-beta.29",
	"babel-jest": "^24.1.0",
	"babel-loader": "^8.0.5",
	"css-loader": "^2.1.0",
	"file-loader": "^3.0.1",
	"jest": "^24.1.0",
	"mini-css-extract-plugin": "^0.5.0",
	"node-sass": "^4.11.0",
	"sass-loader": "^7.1.0",
	"style-loader": "^0.23.1",
	"vue": "^2.6.6",
	"vue-jest": "^3.0.3",
	"vue-loader": "^15.6.2",
	"vue-router": "^3.0.2",
	"vue-template-compiler": "^2.6.6",
	"webpack": "^4.29.3",
},

.babelrc

{
	"presets": [
		"@babel/preset-env"
	],
	"plugins": [
		"@babel/plugin-syntax-dynamic-import"
	]
}

jest.config.js

module.exports = {
	verbose: true,
	moduleFileExtensions: [ "js", "json", "jsx", "ts", "tsx", "node", "vue" ],
	transform: {
		// process js with `babel-jest`
		"^.+\\.js$": "babel-jest",
		// process `*.vue` files with `vue-jest`
		".*\\.(vue)$": "vue-jest",
	}
};

When looking at the referenced file I can see:

const babel = require('babel-core')

Shouldn't that be @babel/core?

Repository:
https://github.com/SuperDJ/vue-jest-babel-core

@SuperDJ
Copy link
Author

SuperDJ commented Feb 14, 2019

By adding the https://github.com/babel/babel-bridge package it is solved. Doesn't it mean that the
package should added to vue-jest?

@eddyerburgh
Copy link
Member

eddyerburgh commented Feb 16, 2019

We have babel-core as a peerDependency, it's up to you to use either @bridge or 6 (for vue-jest <4).

@igravious
Copy link

igravious commented Apr 8, 2019

@eddyerburgh

We have babel-core as a peerDependency, it's up to you to use either @bridge or 6 (for vue-jest <4).

How are we meant to know this?

@Emobe
Copy link

Emobe commented Nov 4, 2019

We have babel-core as a peerDependency, it's up to you to use either @bridge or 6 (for vue-jest <4).

Isn't the point of babel bridge to help maintainers solve this issue? Is this not for the maintainers to do?

@gtempesta-pixartprinting

Shouldn't that be @babel/core?

No, I think there is a problem with the new naming. In order to fix the issue I installed this package:
"babel-core": "^7.0.0-bridge.0"

@danielbachhuber
Copy link

I ran into this issue too. I'm surprised it's not documented in the Jest configuration docs?

@brightknight08
Copy link

Is there any way on how to direct vue-jest to use babel.config.json instead of .babelrc? I recently ran into an error where jest fails :

SyntaxError: E:\l****\*****\src\components\NavBar.vue: 'import' and 'export' may only appear at the top level (233:0)

I found this too:

[vue-jest]: no .babelrc found, skipping babel compilation

But I have a fully working babel.config.json (as recommended by babel's website)

@caugner
Copy link

caugner commented Aug 19, 2020

@brightknight08 Solution can be found here: Use babel.config.js instead of babel.config.json.

@Thaval
Copy link

Thaval commented Dec 15, 2020

Well, I tried that out how many times.. tried out so many solutions and I was just about to give up, then I saw within the package.json, that some script commands were added:
"test:unit": "vue-cli-service test:unit"
So I ran npm run test:unit and now the test is running now, however running "vue-cli-service test:unit" directly from the cmd will fail because '@vue/cli-plugin-babel' is not found.

@gtempesta
Copy link

gtempesta commented Dec 16, 2020

@Thaval in order to run a script coming from node_modules directly from the command line you should specify the path to the bin command ex. for jest it should be ./node_modules/jest/bin/jest.js

@matsilva
Copy link

matsilva commented Sep 1, 2022

This was the solution for me. Nothing else worked other than specifying the babel config file in the transform

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests