Open
Description
Noticed an issue in a few of my Jest test after we switched to using css modules.
Without modules using an alias for my SCSS file works fine:
<style lang="scss">
@import "@design";
...
</style>
Adding 'module' to the style tag cause the import to break:
<style lang="scss" module>
@import "@design";
...
</style>
Error Message:
[vue-jest]: Error while compiling styles: Error: File to import not found or unreadable: root-dir/src/components/@design
(The actual path should be root-dir/src/design)
Here is my jest config:
{
"setupFiles": ["/Users/tam/Repos/signal-client/tests/unit/setup"],
"setupTestFrameworkScriptFile": "/Users/tam/Repos/signal-client/tests/unit/matchers",
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest",
// stub out static assets
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/unit/__mocks__/fileMock.js"
},
"transformIgnorePatterns": ["/node_modules/(?!(@storybook/.*\\.vue$))"],
"moduleFileExtensions": ["vue", "js", "jsx", "json", "node"],
"moduleNameMapper": {
"^@src/(.*)$": "<rootDir>/src/$1",
"^@api/(.*)$": "<rootDir>/src/api/$1",
"^@design/(.*)$": "<rootDir>/src/design/index.scss/$1",
"^@components/(.*)$": "<rootDir>/src/components/$1",
"^@router/(.*)$": "<rootDir>/src/router/$1",
"^@views/(.*)$": "<rootDir>/src/router/views/$1",
"^@layouts/(.*)$": "<rootDir>/src/router/layouts/$1",
"^@assets/(.*)$": "<rootDir>/src/assets/$1",
"^@fonts/(.*)$": "<rootDir>/src/design/fonts.scss/$1"
},
"snapshotSerializers": ["jest-serializer-vue"],
"testMatch": ["**/(*.)unit.js", "**/storyshot.test.js"],
"testURL": "http://localhost/",
"globals": {
"vue-jest": {
// Disable CSS compilation until it's more stable
"experimentalCSSCompile": "false"
}
}
}