SFC styles not being applied with testing-library

user_15356062 0
Viewed 143

I'm adding unit tests to our vue codebase and finding difficult to test an element visibility.

I render the component as usual and as recommended in the examples of the testing-library documentation, but the styles are not being applied to the DOM debugging (using screen.debug). Any clue on this?

Example:

Inside the component

<template>
  <span class="error-message>content here</span>
</template>
<style lang="scss" scoped>
.error-message {
  display: none
}

In the (failing) test file:

render(Component);
expect(screen.getByText(/content here/i)).not.toBeVisible();
screen.debug();

The test fails because the element is visible. The debug prints the DOM as expected, except for the data-v-* classes that we usually see on browser inspect.

vuejs2 vue.js
1 Answers

I ended up changing the way the assertion was being made. As i understand, the styles being applied through the class error-message is not going to be seen by the jest-dom because it wont be inject to the DOM's header in the test environment. So what i did was to assert the class names in the element.

user_153560620
Related