Comments (5)
Option B would be the best approach, I won't have time to implement it for a few weeks. Would you be able to make a PR?
If not, we could do option A as a quick fix.
from vue-jest.
I am off work for the coming week, would try a PR.
from vue-jest.
Any updates? I'd love to help if needed.
from vue-jest.
I just made a PR using option B.
I made three decisons:
-
I decided to use
extract-from-css
instead ofstring-extract-class-names
because the latter would claim.5px
is a CSS class inletter-spacing: 0.5px
. The former seems to work just fine. -
In order to inject the mock object into the component, I am using a code like the following at the end of the output (take a look the PR for the actual version):
;(function() {
var render = _Component.render
_Component.render = function(h) {
this['$style'] = {/* mock object */}
return render.call(this, h)
}
})()
I don't know if there's a better way to do this. Let me know if there is.
- I added Stylus as a peer dependency, since other users might use SASS, for instance. This is causing the tests to fail, though. (they pass just fine once stylus is installed)
from vue-jest.
Im populating my colors from scss variables and Im using in through this. $style, but for some reason this is not working when running unit tests in jest, through yarn serve all works fine. Any ideas? Am I doing smth wrong?
`<style lang="scss" module>
@import '@/styles/variables.scss';
:export {
primary: $color-primary;
secondary: $color-secondary;
success: $color-success;
danger: $color-danger;
info: $color-danger;
light: $color-light;
white: $color-white;
}
</style>`
Why am I doing this? Im using in couple of places colors in js and want to have it in one place.
Inspiration comes from here css-modules/css-modules#86 (comment)
Currently Im just getting empty obj in jest and the object is populated normally when Im running the app.
Is this valid use case @eddyerburgh ?
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.