SFC styles are not being applied to component in test environment with VTL

[joaopslins]

Repository with reproduction: https://github.com/joaopslins/vue-sfc-styles-issue-repro

I'm using Vue 2 with Vue Testing Library

Using toBeVisible() matcher against an element with display: none; applied via a class in <styles> section does not work in my test. Since I couldn't find other people with the same issue (except this SO question where the author solved the issue by other means), I guess this is some configuration issue, or I must be doing something wrong.

I wasn't sure in which repo I should open this issue but I think VTL is working properly, so it must be something related to vue-jest. Unless I'm mistaken, I think vue-jest should apply the styles correctly, due to https://github.com/vuejs/vue-jest#supported-style-languages.

Component: https://github.com/joaopslins/vue-sfc-styles-issue-repro/blob/8d1ac53921dcbe75d81eb3327d07ad9d650344d6/src/HelloWorld.vue#L1-L9

Test: https://github.com/joaopslins/vue-sfc-styles-issue-repro/blob/8d1ac53921dcbe75d81eb3327d07ad9d650344d6/src/tests/HelloWorld.spec.js#L1-L13

This CodeSandbox makes me think it is possible though: https://codesandbox.io/s/vue-testing-sample-input-forked-drjsm?file=/src/components/Button.test.js

Relevant versions: Node: 14 "jest": "^27.4.7", "vue": "^2.6.11" "@vue/vue2-jest": "^27.0.0-alpha.4",

[afontcu]

Hi! And thank you for the report.

Looks like you might be right, because changing to inline styles makes the test pass (at least for me locally):

<template>
  <div class="test" style="display: none">Test!</div>
</template>

So it is def something about vue-jest's ability to compile the style block rather than a Vue Testing Library/Vue Test Utils/jest-dom issue.

I don't have the bandwidth right now to find the root cause, but submitting a PR with a failing test (probably here?) would help a ton 🙏 I'll look into it at some point.

Thanks!

[joaopslins]

Hi @afontcu, I managed to get this PR #439, I'm not sure if this is the reproduction case you're looking for, so please let me know if there's something else that I can/should do, so I can improve the PR. Thanks again for your quick answer!

[afontcu]

Hi! Looks like a good starting point, I'll take a look and see what I can come up with. Thanks!

[joaopslins]

Awesome! Please let me know if I can help in other ways.

[maisasb]

Hi! Any news about this topic? I'm having the same issue here :/