I generated an application with vue-cli and chose Jest as a test runner.
Everything works fine with the HelloWorld default vue.
I added to that ".vue" the following statement :
import aService from 'my-lib';
It works fine when I run the project with : npm run dev
However, when I run the test with npm run test:unit, I get the Cannot find module 'my-lib' from 'HelloWorld.vue' error :
> vue-cli-service test:unit
FAIL tests/unit/example.spec.js
● Test suite failed to run
Cannot find module 'my-lib' from 'HelloWorld.vue'
93 |
94 | <script>
> 95 | import aService from 'my-lib';
| ^
96 |
97 | export default {
98 | name: 'HelloWorld',
Why Jest cannot find my module ? knowing that It runs well and that It's an ES6 module.
What I've tried so far : I added the following code to my jest.config.js file but didn't help:
module.exports = {
preset: '#vue/cli-plugin-unit-jest',
transformIgnorePatterns: [
"node_modules/(?!(my-lib)/)"
],
moduleDirectories: [
"node_modules"
],
};
Related
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
I'm building an Expo app with jest as my test runner.
After incorporateing expo-auth-session into the project, I get the following error:
FAIL screens/tests/EntriesScreen.test.jsx
● Test suite failed to run
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:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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://jestjs.io/docs/en/configuration.html
Details:
C:\Users\User\repos\BROG-Trip-Journal\node_modules\expo-auth-session\providers\google.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '../build/providers/Google';
^^^^^^
SyntaxError: Unexpected token 'export'
17 | Alert,
18 | } from 'react-native';
> 19 | import * as Google from 'expo-auth-session/providers/google';
| ^
20 | import { useDispatch } from 'react-redux';
21 | import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
22 | import PropTypes from 'prop-types';
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (screens/AuthScreen.jsx:19:1)
I'm no stranger to this error on this project. In the past, all I had to do was add the offending module to the transformIngnorePattern so that it would get transpiled by bable. But this time, it's not working.
Here is what my jest.config.js looks like right now:
module.exports = {
preset: 'jest-expo',
moduleDirectories: ['node_modules', 'test-utils'],
setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/(?!(#react-native|react-native|#fortawesome|expo-app-loading|expo-splash-screen|expo-modules-core|expo-font|expo-asset|expo-constants|expo-sqlite|#react-navigation|expo-location|#expo|expo-status-bar|react-native-keyboard-aware-scroll-view|react-native-iphone-x-helper|expo-auth-session)/).*/',
],
setupFilesAfterEnv: [
'#testing-library/jest-native/extend-expect',
'./jest.setup.js',
],
};
What am I missing?
I'm trying to run a very simple test with jest and vue-test-utils but I have an error while running my test.
It's a babel preset error :
And here is my babel.config.json :
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Do someone have any idea what to change in my preset ?
PS : I'm working on a vue-cli project with typescript.
I've cloned and installed this VueJs SSR application (created by Vuejs community itself):
https://github.com/vuejs/vue-hackernews-2.0
I want to change the CSS preprocessor from stylus to Sass, so what i did is:
Install sass dependencies:
npm install -D sass-loader node-sass
Add rule to webpack config (build/webpack.base.config.js):
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
when i run npm run dev i got this error:
ERROR Failed to compile with 1 errors 5:54:17 PM
error in ./src/App.vue?vue&type=style&index=0&lang=scss&
Module parse failed: Unexpected token (13:5)
You may need an appropriate loader to handle this file type.
|
|
| body {
| background: #000
| }
Your vue-loader config seems perfect according to official documentation.
However in your CSS you're missing a semicolon
you have to change this:
body {
background: #000
}
to this one:
body {
background: #000;
}
I've been fighting with Intern for quite a while, to test both server code (following these recommendations) and client code (tradionnal app, as defined on this project of mine, for example).
The Intern config file contains:
loader: {
packages: [
{ name: 'dojo', location: './libs/dojo' },
{ name: 'server', location: './server' }
]
},
However, the location of the dojo package is always ignored. The reported error is:
$ node node_modules/intern/client.js config=intern suites=server/model/tests/News
Defaulting to "console" reporter
Error: Failed to load module dojo/_base/declare from <root>/dojo/_base/declare.js (parent: server/model/Ne
ws)
at <root>\node_modules\intern\node_modules\dojo\dojo.js:742:12
at fs.js:207:20
at Object.oncomplete (fs.js:107:15)
I redacted for the <root> part to simplify the output.
My current workaround is to copy the dojo folder at the <root> level but that's inconvenient...
My current folder structure is:
<root>
|- client
|- libs
| |- dojo
| |- ...
|- node_modules
| |- grunt
| |- intern
| |- ...
|- server
|- dao
| |- tests
|- model
| |- tests
|- ...
Where am I wrong?
Update: Everywhere I read (like here), the configuration is specified as a MID, not as a filename with an extension. When I run my command with "config=intern.js" the configuration is correctly processed (I've hacked "client.js" to log the config content). Note: I'm running Node.js/Intern on a Windows machine...
Additional information: Here is the minimum content required to process my tests.
define({
loader: {
packages: [
{ name: 'dojo', location: './libs/dojo' },
{ name: 'server', location: './server' }
]
},
suites: [ 'server/allTests' ]
});
The issue I faced is related to the loader:
If the config file intern.js is at the root level, the command MUST contain the extension: config=intern.js;
If the config file is in a subfolder like tests then the extension MUST be omitted in the command: config=tests/intern.
This happens in intern/client.js, line 38, with the call to the Node.js require() function.