I have a Vue file which imports a Vue file from node_modules. This file seems to not be recognize as a vue file when imported and doesn't use vue-jest.
I tried to use an htmlLoader, but doesn't work either.
Here is the error I get :
path/node_modules/vue-loading-spinner/src/components/Jumper.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
SyntaxError: Unexpected token <
Here is my jest.conf.js :
const path = require('path')
module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue',
'html'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
"\\.(css|scss)$": "<rootDir>/test/utils/styleTransform.js"
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.vue$': '<rootDir>/node_modules/vue-jest',
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
},
testPathIgnorePatterns: [
"<rootDir>/node_modules/"
],
modulePaths: [
"<rootDir>"
],
setupFiles: ['<rootDir>/test/unit/setup'],
testMatch: [
'<rootDir>/(test/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
],
testURL: 'http://localhost'
}
Thanks for your help.
Related
File Structure:
public
- assets
src
other file
Svelte.config.js
resolve: {
alias: {
"#": resolve(__dirname, "src"),
$assets: resolve(__dirname, "public/assets"),
},
},
Jest.config.cjs
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
transform: {
"^.+\\.svelte$": ["svelte-jester", [sveltePreprocess()]],
"^.+\\.js$": "babel-jest",
"^.+\\.(png|svg)$": "<rootDir>/svgTransform.js",
},
moduleFileExtensions: ["js", "svelte"],
bail: false,
verbose: true,
testPathIgnorePatterns: ["node_modules"],
transformIgnorePatterns: ["node_modules"],
moduleDirectories: ["node_modules"],
setupFilesAfterEnv: ["#testing-library/jest-dom/extend-expect"],
moduleNameMapper: {
"#/(.*)$": "<rootDir>/src/$1",
"$assets/(.*)$": "<rootDir>/public/assets/$1",
},
setupFiles: ["<rootDir>/setupTests.js"],
testResultsProcessor: "jest-sonar-reporter",
testTimeout: 30000,
testEnvironment: "jsdom",
};
Usage:
import SvgClose from "$assets/svg/close.svg";
Error:
Cannot find module '$assets/svg/close.svg' from 'src/components/atoms/Modal.svelte'
# work fine but $assets not working .
What changes I should do in jest.config.cjs
or I am Missing something?
I am unit testing my Vue project with Jest and I get the code coverage in the console, no problems there, however the HTML report is not working -
package.json:
...
"unit": "jest --config test/unit/jest.conf.js --coverage",
...
jest.conf.js:
const path = require('path')
module.exports = {
verbose: true,
testURL: "http://localhost/",
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e'
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
mapCoverage: true,
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!src/plugins/vuetify.js',
'!**/node_modules/**'
]
}
What might be the cause of that? Thank you in advance.
It looks like your coverage report property might need to be adjusted. You should try including html in your coverageReporters, like this:
module.exports = {
...
coverageReporters: ['html']
...
}
I am integrating a package with flowtype for the purpose of that in my webpack file added dependency to webpack as follows
module: {
rules: [
{
test: /\.js?$/,
// exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: [
["#babel/preset-env"],
["#babel/preset-react"],
[
require.resolve("babel-preset-react-app/dependencies"),
{ helpers: true },
],
],
plugins: [
[
"#babel/plugin-proposal-class-properties",
{
loose: true,
},
],
["transform-flow-strip-types"],
],
},
},
},
],
},
now all the flow type errors have been solved but many other new errors are introduced like
Module not found: Error: Can't resolve
in import statements where the statement is like
import Button from './Libraries/Components/Button';
any idea on what might be causing these issues ?
I'm using windows10 and when I run Jest on VUEJS project for tests i've got this :
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '#vue/test-utils';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1086:14)
Itried a lot of soltions, but still not working Here is my jest.config.js file:
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
transform: {
"^.+\\.js$": "babel-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"
},
snapshotSerializers: [
"<rootDir>/node_modules/jest-serializer-vue"
],
testMatch: [
'<rootDir>/tests/**/*.spec.(js|jsx|ts|tsx)|<rootDir>/**/__tests__/*.(js|jsx|ts|tsx)'
],
transformIgnorePatterns: ['<rootDir>/node_modules/']
};
Bug report on ElementUI
I am using On-demand loading of ElementUI components. I've followed the instructions correctly and it works just fine when running the app.
The problem arises when I try to test with Jest and Vue test utils. None of the components I am importing seem to be found, so I get this error when running my tests:
ReferenceError: _Message is not defined
I get the same error for any of the other components, that my test touches.
On the bug report I mentioned above, I am being suggested that my babel configuration is not being applied in my testing environment? Or its something about my Jest configuration. I've tried various things to fix this:
Doing a manual mocks
Spying on the component
Importing the whole ElementUI package inside my test
Updating Jest configuration
Nothing seems to work and I have no idea what is wrong...
bebel.config.js
module.exports = {
presets: [
'#vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
};
jest.config.js
module.exports = {
// roots: ['<rootDir>/src/', '<rootDir>/tests/'],
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/(?!element-ui)',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
collectCoverage: true,
coverageReporters: ['lcov', 'text-summary'],
};
I have a couple of suggestions for you here:
change this in jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest'
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
collectCoverage: true,
coverageReporters: ['lcov', 'text-summary'],
};
and this in babel.config.js
module.exports = {
presets: [
'#vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
"env": { "test": { "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] } }
};
Also I believe #babel/plugin-transform-modules-commonjs is needed in yarn.
Let me know if this works.