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.

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

the style update is failing after In the Vue3 component test #24874

Closed
cuixiaorui opened this issue Nov 29, 2022 · 14 comments · Fixed by #24965
Closed

the style update is failing after In the Vue3 component test #24874

cuixiaorui opened this issue Nov 29, 2022 · 14 comments · Fixed by #24965
Assignees
Labels
CT Issue related to component testing

Comments

@cuixiaorui
Copy link

Current behavior

I used tailwind CSS for my project

image

The first time you enter the cypress component test it's fine

image

When I change the class, the cypress component test does not update the view

image

Changed bg-red-500 to bg-blue-500

When you go back to cypress and click the refresh button, you will see that the style is invalid
image

Desired behavior

The correct behavior should be after updating the component's class
you should see the correct result in the cypress component test, where the background turns blue

Test code to reproduce

repo: https://github.com/cuixiaorui/cypress-issue-for-vue3-compoment-test-hot-update

Cypress Version

11.2.0

Node version

v17.5.0

Operating System

macOS 13.0.1 (22A400)

Debug Logs

No response

Other

No response

@cuixiaorui
Copy link
Author

cuixiaorui commented Nov 29, 2022

@lmiller1990
hi, guy
One more piece of information
I refreshed the whole cypress window (cmd+r) and it didn't work, the style still doesn't come out
It only takes effect when it is initialized for the first time

@lmiller1990
Copy link
Contributor

Hmm interesting, I guess this is related to how Tailwind does a JIT compilation and injects the latest stylesheet. I notice:

My question is - how does the latest styles generated by Tailwind actually get into the app in the first place (even in a regular Vite development environment)?

The only style code I see is

@tailwind base;
@tailwind components;
@tailwind utilities;

Does one of these somehow contain all the JIT'd styles based on your CSS classes?

@lmiller1990
Copy link
Contributor

lmiller1990 commented Nov 29, 2022

Right, I see it injects during development like this:

image

Let's find out why that isn't working in Cypress. Also, I don't see how this is injected in the regular Vite development environment, either... let's find out.

Ok, so this is the line that does injection: @tailwind utilities;. Let's find out why Cypress is messing up, now. It looks like the Tailwind CSS is not getting regenerated, it's stuck on the old value of bg-red-500:

image

@lmiller1990
Copy link
Contributor

I think the problem is related to importing the style in the component.ts file. If I do

<style>
@import './style.css';
</style>

Inside of App.vue, it's fine. It does NOT work in App.cy.ts, though. It looks like the bug is related to "importing dynamically generated CSS in JS (or TS) files". I will need to spend some more time to find out exactly how the Tailwind CSS update happens, and why it's getting the stale values here.

I actually just realized I had a similar bug in my own project. I worked around it by kicking off Tailwind manually

https://github.com/lmiller1990/eleutheria/blob/main/packages/frontend/package.json#L14

Then importing that:

https://github.com/lmiller1990/eleutheria/blob/main/packages/frontend/cypress/support/component.ts#L7

I wonder if we have a bug in the Cypress Vite plugin: https://github.com/cypress-io/cypress/blob/develop/npm/vite-dev-server/src/plugins/cypress.ts#L75-L78

@lmiller1990
Copy link
Contributor

Ah, @marktnoonan offers this work around:

const styles = import('../../src/style.css?' + Date.now())

I think vite (or our integration) has some caching that we need to bust somehow - it's not realizing that the stylesheet has been updated.

Can you test that out @cuixiaorui ?

@cuixiaorui
Copy link
Author

cuixiaorui commented Nov 30, 2022

cool It's working now

That's an interesting solution

Looking forward to finding the real problem

thx @lmiller1990 @marktnoonan

@rockindahizzy rockindahizzy added routed-to-ct CT Issue related to component testing labels Nov 30, 2022
@lmiller1990
Copy link
Contributor

We should see if webpack based projects have a similar problem. The solution might be as simple as appending a query string, like this workaround, but somewhere inside our {webpack|vite}-dev-server packages.

@lmiller1990
Copy link
Contributor

I found out this only happens with Vite - webpack works fine. I'll try and patch vite-dev-server.

@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: product backlog labels Dec 5, 2022
@lmiller1990
Copy link
Contributor

lmiller1990 commented Dec 5, 2022

I am trying to fix this, I think #24965 should do it. Let's see how it goes. I'll share a pre-release for you try @cuixiaorui, please give me a day or so. I don't think we even care about HMR here - if any module dependency changes (including supportFile) we can just do a full reload... the bundle should be pretty small in general, and Vite does a lot of caching, so I don't think it'll really impact perf. But let's see!

@lmiller1990
Copy link
Contributor

lmiller1990 commented Dec 6, 2022

@cuixiaorui can you try the pre-release (scroll to bottom and grab the install link for your OS) e1d766c#comments

It's working for me. This will be fixed once #24965 is merged.

@cypress-bot cypress-bot bot added stage: review and removed stage: needs review The PR code is done & tested, needs review labels Dec 6, 2022
@baus
Copy link

baus commented Dec 6, 2022

@marktnoonan
Copy link
Contributor

Not adding an estimate since @lmiller1990 already has an open PR for this

@lmiller1990
Copy link
Contributor

@cuixiaorui fixed, it will be in the next release!

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Dec 13, 2022

Released in 12.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.1.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Dec 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CT Issue related to component testing
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants