You are welcome

My pleasure

Hello, does cypress/vue support styles from 3rd party libraries? I read the docs here https://github.com/cypress-io/cypress/blob/develop/npm/vue/docs/styles.md From the above i was able to make an example

stylesheets

pointing to a URL work but was unable to make

cssFiles

work pointing to a local file and I don't get any errors, just no applied styles. I need my custom styles from bootstrap-vue that the rest of my

nuxt

app is using but while troubleshooting i even tried a simple style in a file next to the component:

mount(FormInput, {
      stubs,
      cssFiles: './FormInput.css',
    })

The above still doesn't use the styles from the local file. Does anyone have any idea how to get my local styles to be used during the test?

The last test example here shows using

stylesheets

for local too (maybe

cssFiles

is deprecated?) https://github.com/cypress-io/cypress/blob/develop/npm/vue/cypress/component/tailwind/plain-html-spec.js So i tried something like the following and it's still not pulling in the stylesheet

mount(FormInput, {
      stubs,
      stylesheets: 'components/FormInput.css',
    })

So the above does work if i add forward slash at the beginning like stylesheets: '/components/FormInput.css', I'll add a pull request to update the docs

Nevermind on the pull request, I still have to figure out how to get my test using my styles where they are. For some reason it's only working with the local file next to the component. It's not reading my

'/node_modules/bootstrap-vue/dist/bootstrap-vue.css'

or even my

'/assets/css/formStyles.scss'

I think it's as simple as trying to import the styles from the spec file or within the support file

This is the recommended way to import stylesheets because it'll write it to head. You can also do the same thing at the top of any spec file that needs to be styled.

Oh yes @User this docs is outdated https://github.com/cypress-io/cypress/edit/develop/npm/vue/docs/styles.md cssFiles is not a valid option anymore

Thank you for pointing it out, we wil fix it ASAP

Thank you @User @User I tried to add

import '/components/FormInput.css'

to

cypress/support/index.js

(also tried

cypress/support.js

and

cypress/support/support.js

) and restarting the test and the CSS is not being picked up. Trying the import at the top of the spec file did work. When i added my real style files i ran into another problem. Most of my styles are in

.scss

so i get error

node sass does not yet support your current environment

.

.scss

is handled by

nuxt

so I'm not sure how to pull that functionality out of

nuxt

so it can be shared with

cypress

.

:/

Do you have a reproduction?

We can take it from here and debug it.

I'll add one now, are you okay if i add it to the nuxt repo one i made for another issue?

However you wanna get it to us is fine

a new branch would be good if you wanna share the same repo

okay great i will put in new branch same repo and post link

Alright. Ping me when you have it. I'll poke Bart in our internal Slack, too.

@User Here is a reproduction. https://github.com/travis5491811/cypress-vue-nuxt/tree/styleTesting

Branch is styleTesting

I am on it

@some-air-72294 I found a few things that are not obvious.

1 since we run the app in electron and not in node, node-sass seems to... not work. We will figure out why and fix it. In the meantime use sass instead. It is faster and does about the same thing.

2. Avoid importing files with their absolute path. Remember that everything that is ending up in the browser is processed by webpack first. The spec file, it’s dependencies, and your components are going to use the loaders. Let webpack do the resolving and use webpack compatible aliases.

3. There is a special file in cypress called support/index.js that will be loaded before your tests run. It is usually a good place to import all global styles and install components

I'll make a PR to show progress