AHHHH I did it

Let me double check. Then I will share my solution

Ok @User I did

npm install html-webpack-plugin@3

Downgrading from v4. Then it worked. I think we can do some work on our end to make this less painful, I will look into it.

Can you try that?

Yes! Will try right now

Gonna start a fresh branch - other one got pretty messy. Will get to it later tonight

Sure

let me know if it works (or doesn't)

I am going to be working through the dependencies and making sure things "just work" for the next few days

So if you find anything else please let us know, or make a GH issue, or both 🎉

Awesome - thank you both a bunch. You rock!

✊

It works! Couldn't wait to try it 😄 haven't done anything with more complex components yet but a dummy component is rendering so i think i'm good! ❤️

Beyond having a styleguide for typography and colors, is cypress/vue an alternative to storybook?

With component tests especially I've been wondering about this, I think the missing piece for me is the artifact at the end - I can send people a link to storybook to go and check out our various components, play with toggles etc. The videos, images, etc for Cypress aren't quite the same. I am kind of wanting to make our cypress tests and our storybook stuff more closely related though.

Our first idea was that it was not necessarily a replacement for storybook but more a replacement for jest. You can think about it this way: - in cypress, you setup and check all the cases, including the ones that don’t look good but could be error prone. It’s a testing engine with a visual rendering and a complete browser. - in storybook, you showcase components as you intend them to be used make them shine, sell them.

This being said, we understand that a lot of those use cases are the same and it gets annoying to write and maintain them twice

What do you guys think?

Is it possible to push or place bounty to get help making cypress/vue work with nuxt? Our main usecase can do away with storybook because our main issues are usage testing. But we haven't been able to get cypress/vue working with nuxt.

I just added an example to the cypress repo

Give me 30 min and I send you the link

Okay thank you

I found it https://github.com/cypress-io/cypress/blob/develop/npm/vue/examples/nuxt/README.md Trying to implement it now

I would love a way to do kind of like

cy.screenshot()

but captures the current state of the app and later compile those snapshots with vuepress or whatever, with a tree menu kind of like storybook. That would be a neat way to capture example states for browsing through, not sure how far it could get with the interactivity you can get with storybook... but just a showcase tool, it could maybe be ok.

Cy.screenshot() works and you could direct the files to an asset directory in the vuepress assets, then crawl through them.

@wonderful-match-15836 would you hypothetically be interested in helping us shape it out?

Yeah totally - I was about to start looking at organizing screenshots, image diffs, etc in some kind of SSG "report" but the main thing is that images are less interesting/useful than real elements like storybook renders - resizing, hovering, etc.

There are a lot of unknowns for me so this would be a bit of a learning experience to even think through how to get it working

@User is there anything different non-typescript users need to do to get the example working? I downloaded the repo, cd to npm/vue/examples/nuxt, then yarn install and get error about this line in package.json pointing to a directory that does not exists

"@cypress/vue": "file:../../dist",

so i change it to install the latest

@cypress/vue.

Then when i run i get

RROR in components/Logo.spec.ts:4:1                                                                                     11:32:24
TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
    2 | import Logo from './Logo.vue'
    3 |
  > 4 | describe('<Logo />', () => {
      | ^^^^^^^^
    5 |   it('contains an svg', () => {
    6 |     mount(Logo)
    7 |     cy.get('svg').should('be.visible')

ERROR in components/Logo.spec.ts:5:3
TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
    3 |
    4 | describe('<Logo />', () => {
  > 5 |   it('contains an svg', () => {
      |   ^^
    6 |     mount(Logo)
    7 |     cy.get('svg').should('be.visible')
    8 |   })

ERROR in components/Logo.spec.ts:7:5
TS2304: Cannot find name 'cy'.
     5 |   it('contains an svg', () => {
     6 |     mount(Logo)
  >  7 |     cy.get('svg').should('be.visible')
       |     ^^
     8 |   })
     9 | })
    10 |

ERROR in cypress/plugins.js:1:23
TS2688: Cannot find type definition file for 'cypress'.
  > 1 | /// <reference types="cypress" />
      |                       ^^^^^^^
    2 | const { startDevServer } = require('@cypress/webpack-dev-server')
    3 | const { getWebpackConfig } = require('nuxt')
    4 |

Or is the example only a partial example and requires additional setup to get running?