Comments (8)
Can confirm this bug.
I have a component, which import another one from different directory.
Importing this component with @ alias results in:
Cannot find module './src/components/partials/B' from 'A.vue'
But when i change import path to relative path, eg. '../../components/partials/B'
it resolves correctly.
I added moduleNameMapper to Jest and configure babel alias.
from vue-jest.
I believe it's slightly more complicated than that, because the module-resolver plugin is running, but the path resolution is incorrect.
In case anyone else stumbles across this, my solution was to use:
"moduleNameMapper": {
"^\\./resources/assets/js/(.*)$": "<rootDir>/resources/assets/js/$1",
}
Or you could disable the babel plugin in env.test and then do what you said above, but that's currently a bit more confusing because of the weird way envs are merged in a json babelrc.
But I'm getting by just fine with this workaround, so no hurry! Thanks for the response!
from vue-jest.
Hi @eddyerburgh
As we spoke before, today I started working on debugging this issue. So far I have found out that using alias in .babelrc
file will result in jest to look for the module as a hastePackage
which results in the error. Without the alias nothing is being searched for as a hastePackage
.
I am looking to find out what is a hastePackage
in jest
, I was wondering if you or someone else has any ideas on this?
from vue-jest.
I'm sorry I haven't been able to debug this.
A temporary solution is to use Jest moduleNameMapper. You can add this to your Jest config field:
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
from vue-jest.
haste is a Facebook module resolver. They just moved Facebook away from it, so they may be planning to move Jest away too. https://github.com/facebookarchive/node-haste/tree/master
Thanks for looking into this by the way 😀!
from vue-jest.
No problem :)
What would you suggest to do about this?
I can go further into jest-resolve
module to find a way to account for the error caused by
hastePackage
, but with their future plan, it might not be the best.
Or is there a possibility somewhere to account for this error in the vue-test-utils?
Or before passing the path to jest-resolve
, transform the alias into a relative path.
from vue-jest.
Just ran into this problem today. I was able to come up with a somewhat clean solution. My setup includes: babel, jest, babel-jest, vue-jest.
This is the relevant portion of my babel.config.js
:
module.exports = function (api) {
// Module Resolution
const moduleAliases = {
"^src/(.*)$": "./src/\\1",
"^localization/(.*)$": "./src/localization/\\1",
"^lib1(/(.*))?$": "../../Public/lib1/src/\\2",
"^lib2(/(.*))?$": "../../Public/lib2/src/\\2"
};
if (api.env("test")) {
// Jest requires all module aliases to be mapped relative to <rootDir>
for (const [key, value] of Object.entries(moduleAliases))
moduleAliases[key] = `<rootDir>/${value}`;
}
api.cache(true);
return {
plugins: [...],
presets: [...]
}
Without this, using the module aliases in SFCs did not work when running tests. The only entry in moduleNameMapper
for Jest is the one mapping which Vue build to use.
Does anyone know if something like this should/could be automatically supported by vue-jest?. I would be happy to look at making a pull request if it seemed like something that made sense to automatically handle.
from vue-jest.
Hi! I am the main one maintaining this project nowdays.
Is this still an issue? I'm guessing so - isn't the solution just to use jest moduleMapper? Not sure this is something vue-jest should be doing. vue-jest
is just one part of the jest config.
from vue-jest.
Related Issues (20)
- install errors
- Unable to mock $style object on a Vue 3 Options API based component using CSS Modules
- Issue with script and script setup in the same vue file HOT 5
- Upgrade TS target to ES6 HOT 3
- `compilerOptions` in `jest.globals` not taking effect? HOT 7
- Instructions for setting up `vue-test` when migrating from Vue 2 to Vue 3? HOT 1
- New test fail with mistake ENOENT: no such file or directory, open HOT 1
- Using v8 as the coverageProvider, used files without tests are being reported with 100% coverage HOT 2
- Test fails to run when using CSS v-bind and parent directory starts with "x"
- DOCS: vue-jest 4.x doesn't support jest 25.x
- Cannot find module '@babel/preset-env'
- v-bind(css) + number prefix folder path + windows : make a syntax error HOT 1
- Incompatibility with Prettier v3 HOT 4
- Injecting SFC styles into the DOM using JSDom test environment HOT 1
- @use rules must be written before any other rules.
- Newest version on npmjs.com is 5.x alphs, but on GitHub it's up to 29.x
- Single uncovered line flagged by Vue `template` HOT 2
- 组件测试的时候,vuewrapper里面拿到的vm是空,使用的script setup写法,optionsApi写法是ok的?
- Bug: Props detection broken with jest since 2.4.2 (works in 2.4.1) HOT 7
- Tests fail due to "Cannot destructure property 'config' of 'undefined' as it is undefined."
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-jest.