Does cypress need to be in the same package as nuxt

[TheJoeSchr]

Hi, really cool that you made this.

I'm trying to use this in my project, we are using yarn workspaces.

Do I understand this right, that cypress-nuxt and cypress itself should share the package.json with the nuxt project, otherwise we would have to carry over all the dependencies into a separated cypress project.

Here is an (outdated) example of our file hierarchy: https://github.com/JoeSchr/graphile-starter/tree/master/%40app

@app/server => nuxt @app/e2e => cypress

[NickBolles]

yea, this is something I was wondering during dev. We could pipe through loading params to nuxt, rootDir is one of them. Otherwise it will just use CWD I believe. would a root dir from your cypress plugin work?

[NickBolles]

Try out version 1.1, you can pass a rootDir in. Try it out and let me know.

[TheJoeSchr]

Sorry, I don't really get how can I pass rootDir in? as an env variable when I start cypress?

[TheJoeSchr]

Because I can't even install it if I have nuxt server and cypress separated, because it depends on nuxt:

warning "cypress-nuxt > @cypress/webpack-preprocessor@4.1.5" has unmet peer dependency "webpack@^4.18.1".
warning " > cypress-nuxt@1.1.0" has unmet peer dependency "nuxt@>=2.12.0".

[NickBolles]

yes, you would need to install nuxt in your cypress location too in order for the plugin to use nuxt to load the config.

You would pass it in as an option I'll add a segment to the readme

Edit: see the new Options segment in the readme

[NickBolles]

Also, keep in mind that this is not needed for E2E tests with nuxt. for that you just start your dev build for nuxt and browse to it with cypress.

So for unit tests you would use this package. Do you still want cypress as a seperate package in your workspace? generally I like unit tests as close to the source as possible, but it looks like you have yours in @app/client/tests? would installing cypress in @app/client and configuring it to run all @app/client/tests work? that seems like the most intuitive for me

[TheJoeSchr]

So this is a bit complicated. I actually forked this repo from https://github.com/graphile/starter, which is build with React, and I'm trying to turn it in a Vue project (with their blessing).

So as I want to keep in lockstep with them, I also kept @app/client which actually doesn't contain anything usefull (because nuxt is more tightly knit). backend and frontend/client stuff all happens in @app/server, so this is the actual directory where my nuxt.config.ts, tsconfig.json & package.json is (this is a yarn workspaces monorepo project kinda deal).

I wouldn't mind having 2 configuration, one for unit test and one for e2e/integration testing. but it would be best to have it all together. for eg. all the e2e tests are now in @app/e2e/cypress/integreation. the more I'm working with cypress, the more I'm also leaning to do the unit tests of components with it. (I also never got vue-unit-test running, but I currently fixed some tsconfig path issues, maybe that's the reason why).

The remaining jest unit test would only to db, backend (gql) and migration testing.

Also, keep in mind that this is not needed for E2E tests with nuxt. for that you just start your dev build for nuxt and browse to it with cypress.

That's how I do it now, if possible I would like to also to my unit tests this way, by just importing from @app/server/src/nuxt/components/example.vue in e.g. @app/e2e/cypress/integrations/example.spect.ts

Another reason is, that I'm developing from windows, so in @app/e2e/node_modules there are the windows variants installed (bcs I don't really like to pass them through via $DISPLAY). the dev & production server at @app/server runs on a linux inside docker though. If I have all together in one project, they tend to mess each other up...

Edit: see the new Options segment in the readme

Thanks! I understand now and look forward to trying these tomorrow :D

[TheJoeSchr]

So I think I'm almost there, but it fails at the last minute...

nuxt compiles via cypress, it loads the correct envs, etc. but at the last minute, when cypress opens the example.spec.ts I get: cypress_vue_unit_test_1.default

I have cypress_vue_unit_test installed in everywhere it should be needed (in cypress and in nuxt project):

my example.spec.test is basically copied from the readme:

// import { createWrapper } from "@vue/test-utils";
import mountVue from "cypress-vue-unit-test";
import Logo from "~/components/example/Logo.vue";
// @app/server/src/nuxt/components/example/Logo.vue
describe("Logo", () => {
  beforeEach(() => {
    mountVue(Logo);
  });

  it("should initialize", () => {
    cy.wrap(Cypress.vue)
      .should("not.be.undefined")
      .getCy("main-logo")
      .should("have.length", 1);

    // You can even use @vue/test-utils along side of it
    // cy.wrap(createWrapper(Cypress.vue)).should(cmp => cmp.isVueInstance());
  });
});

[TheJoeSchr]

Oh, renaming example.spec.ts to example.spec.**js** did the trick. do I need to do something else to import it in a TS file?

[TheJoeSchr]

So now it fails at cy.wrap(Cypress.vue) It seems .vue is still undefined:

I tested to .wrap(Cypress), that works, but there is no .vue on it

[NickBolles]

So now it fails at cy.wrap(Cypress.vue) It seems .vue is still undefined:

I tested to .wrap(Cypress), that works, but there is no .vue on it

Hmmm. Let me try this and make sure it's working for me.

[NickBolles]

Oh, renaming example.spec.ts to example.spec.**js** did the trick. do I need to do something else to import it in a TS file?

Sounds like you need to update your cypress testFiles config setting. I have mine set to **/*.spec.* I think to capture both js and ts extensions

[NickBolles]

So now it fails at cy.wrap(Cypress.vue) It seems .vue is still undefined: I tested to .wrap(Cypress), that works, but there is no .vue on it

Hmmm. Let me try this and make sure it's working for me.

This is the same setup I have.

what's your "~/components/example/Logo.vue" file look like? are you sure it's importing it correctly? what if you just console.log(Logo)?

[TheJoeSchr]

Oh, renaming example.spec.ts to example.spec.**js** did the trick. do I need to do something else to import it in a TS file?

Sounds like you need to update your cypress testFiles config setting. I have mine set to **/*.spec.* I think to capture both js and ts extensions

No it was loading the example.spec.ts but failed to import the required modules

[TheJoeSchr]

This is my "~/components/example/Logo.vue". If I put an error in it, it refuses to load, so it's finding it and everything.

<template>
  <div>
    <h1>TEST LOGO</h1>
  </div>
</template>

<style></style>

Output of console.log(Logo):

Logo {staticRenderFns: Array(1), _compiled: true, render: ƒ}render: ƒ ()arguments: (...)caller: (...)length: 0name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: Logo.vue?e31f:1[[Scopes]]: Scopes[2]staticRenderFns: Array(1)0: ƒ ()length: 1__proto__: Array(0)_compiled: true__proto__: Object

If you want I can give you access to a private repo where I made a branch for testing this?

[NickBolles]

@JoeSchr let me know if you have a branch I can use to test this out. Creating a few examples for this repo would be good too, so I might try to do that in the next couple days

[TheJoeSchr]

I send you an invite, the branch is called /feature/SPIKE-replace-laravel--cypress--mount-component

[NickBolles]

@JoeSchr I took a look, but that seems like a pretty complicated app and I can't get it to run on windows (looks like graphile expects bash syntax, or maybe a script is executing the bin folder script directly, which chooses the .sh instead of the .cmd?)

I would also update cypress-nuxt to the latest version, It's possible that the fix to pass the config type ("client") along with the load options would fix your issue.

edit: also, sorry for the delay on this. Feel free to ping me with an @NickBolles if I don't respond after a while.

[weotch]

Btw, this package is working for me so far with yarn workspaces. Here's my cypress/plugins/index.js:

const cypressNuxt = require("cypress-nuxt")
const path = require('path')
module.exports = function (on, config) {
    return cypressNuxt.plugin({
        loadOptions: {
            rootDir: path.join(__dirname, '../../nuxt-app')
        }
    }).then(function (webpackPreProcessor) {
        on("file:preprocessor", webpackPreProcessor);
        return config
    })
}