Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Injecting SFC styles into the DOM using JSDom test environment #553

Open
ursulean opened this issue Oct 2, 2023 · 1 comment
Open

Injecting SFC styles into the DOM using JSDom test environment #553

ursulean opened this issue Oct 2, 2023 · 1 comment

Comments

@ursulean
Copy link

ursulean commented Oct 2, 2023

Reposting this question from StackOverflow as this behavior is most likely caused by vue-jest.

I want to create a Jest component test for a Vue3 single-file component where I have access to the style tag included in the .vue file. Using the JSDom Jest environment and the vue-jest transformer which supports styles tags, the component's style should be added to the DOM when mounted with the mount function from the @vue/test-utils package. But this does not happen.

I have added a minimal example in this GitHub repository for anyone who wants to reproduce this issue with my setup. When running npm test on the above repository, the following output is produced, showing that the style tag is not present in the head of the document.

> vue-jest-styles-injection@0.0.0 test
> jest

 FAIL  src/components/HelloWorld.test.ts
  HelloWorld.vue
    ✕ takes a screenshot with hello world (12 ms)

  ● HelloWorld.vue › takes a screenshot with hello world

    expect(received).toContain(expected) // indexOf

    Expected substring: "style"
    Received string:    "<html><head></head><body><div data-v-app=\"\"><h1>Hello, world!</h1><div class=\"card\"><button type=\"button\">count is 0</button><p> Edit <code>components/HelloWorld.vue</code> to test HMR </p></div><p> Check out <a href=\"https://vuejs.org/guide/quick-start.html#local\" target=\"_blank\">create-vue</a>, the official Vue + Vite starter </p><p> Install <a href=\"https://github.com/vuejs/language-tools\" target=\"_blank\">Volar</a> in your IDE for a better DX </p><p class=\"read-the-docs\">Click on the Vite and Vue logos to learn more</p></div></body></html>"

       6 |   it('takes a screenshot with hello world', async () => {
       7 |     mount(HelloWorld, { props: { msg: "Hello, world!" }, attachTo: document.body });
    >  8 |     expect(document.documentElement.outerHTML).toContain("style")
         |                                                ^
       9 |   });
      10 | });

      at Object.<anonymous> (src/components/HelloWorld.test.ts:8:48)

I tried using the Vitest testing framework instead of Jest, and I was able to mount the component and its styles to the DOM as intended. I have also included this working example on a branch in my repository.

While Vitest looks great, the real repository I want to integrate these tests into is already using Jest and has quite a complex setup which I expect will be difficult to migrate to Vitest. So I want to get this working using Jest.

Looking at the processStyles function in process.js, it looks like non-moduled CSS is ignored, and that for moduled CSS, the styles are only used for generating a class map, and not being injected into the DOM.

Is it possible to get this behavior from vue-jest?
@jolting
Copy link
Contributor

jolting commented Nov 16, 2023

This is currently not supported, but it would be welcome addition to model it after vitest.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jolting @ursulean