cypress-nuxt v1.3.1
Cypress-nuxt
Use Cypress for all of your component unit tests.
Why though?
First off, cypress is awesome. Second, there's a bit of wiring up needed when using nuxt. Although this was made way easier with Nuxt exposing the webpack config, we still need to tweak the config a tiny bit to get it to work with cypress.
There also might be other utilities needed in the future to make cypress even easier to use with nuxt, so I thought a NPM package would be good. Maybe exposing the nuxt config to cypress, or automatically setting the base URL? Have Ideas? submit some enhancement requests!
Getting started
Nuxt version
First, this requires Nuxt >2.12. This module doesn't rely on nuxt itself so you need to install it (although it's a nuxt app... if you don't have it installed what are you doing?). If you're not on > 2.12 upgrade nuxt
Install
npm install -D cypress-nuxt cypress-vue-unit-test
or with yarn
yarn add -D cypress-nuxt cypress-vue-unit-test
Add the cypress plugin
With Async/Await
You might want to check that your node.js version supports async await. If it doesn't... well first upgrade. :p but if not use promises below.
cypress/plugins/index.js
const cypressNuxt = require("cypress-nuxt");
module.exports = async (on, config) => { // make sure to include "async"!
on("file:preprocessor", await cypressNuxt.plugin()); // make sure to include "await"!
// other plugins...
return config;
};
With Promises
cypress/plugins/index.js
const cypressNuxt = require("cypress-nuxt");
module.exports = function (on, config) {
return cypressNuxt.plugin().then(function (webpackPreProcessor) {
on("file:preprocessor", webpackPreProcessor);
// other plugins...
return config;
})
};
@nuxt/typescript-runtime
in your cypress/plugins/index.js
add a ts-node register call before getting the webpack config.
require("ts-node").register({
compilerOptions: {
// force to compile to what node.js expects
target: "es5",
module: "commonjs" // node expects commonjs format
}
});
cypressNuxt.plugin({})
.then((webpackConfig) => {
console.log(webpackConfig)
})
With Async/Await
I like to pull it out to a function so it's easy to await
cypress/plugins/index.js
const cypressNuxt = require("cypress-nuxt");
module.exports = async (on, config) => { // make sure to include "async"!
on("file:preprocessor", await filePreprocessor()); // make sure to include "await"!
// other plugins...
return config;
};
function filePreprocessor() {
require("ts-node").register({
compilerOptions: {
target: "es5",
module: "commonjs" // node expects commonjs format
}
});
// return the promise to return the webpack config
return cypressNuxt.plugin({})
}
Options
the plugin function takes an options object. See the type definitions for LoadOptions for valid options.
rootDir
Set the root dir to search for the nuxt.config.js|ts This is useful if you don't run cypress from the directory that contains your nuxt config file.
to resolve app/client/nuxt.config.js
from app/e2e/cypress/plugin.js
return cypressNuxt.plugin({
loadOptions: {
rootDir: path.join(__dirname, "../../client")
}
})
"for"
This option tells nuxt what version of the webpack config you want. Leaving this undefined seems to work fine.
Write a test
Javascript
~/components/Logo.spec.js
import { createWrapper } from "@vue/test-utils";
import mountVue from "cypress-vue-unit-test";
import Logo from "~/components/Logo.vue";
describe("Logo", () => {
beforeEach(mountVue(Logo));
it("should initialize", () => {
cy.wrap(Cypress.vue)
.should("not.be.undefined")
.get(".Triangle")
.should("have.length", 4);
cy.wrap(createWrapper(Cypress.vue)).should(cmp => cmp.isVueInstance());
});
});
Typescript Tests (if you have @nuxt/typescript-build enabled)
Just rename your spec file to .ts
: ~/components/Logo.spec.ts
Test organization
Component Tests
There's currently a work in progress "component tests" feature. Pull Request. This will make organizing E2E vs component tests much more intuitive.
For now
There are two potential methods, which essentially ignore **/*/e2e/**/*
(ignoreTestFiles=**/*/e2e/**/*
) for unit tests, and for e2e ignore anything outside of **/*/e2e/**/*
(ignoreTestFiles=!**/*/e2e/**/*
)
Directory structure
/
/cypress/
plugins/
index.js
fixtures/
support/
e2e/
testFile.e2e-spec.ts
/components
Logo.vue
Logo.spec.ts
/pages
index.vue
package.json
cypress.json
Different config files
You could also use two different cypress config files
packages.json
{
"scripts": {
"cy:run": "cypress run",
"cy:open": "cypress open",
"cy:run:e2e": "cypress run --config-file cypress.e2e.json",
"cy:run:unit": "cypress run --config-file cypress.unit.json"
}
}
cypress.e2e.json
{
"$schema": "https://raw.githubusercontent.com/cypress-io/cypress/develop/cli/schema/cypress.schema.json",
"integrationFolder": "./cypress/e2e",
"testFiles": "**/*.*spec.*",
}
cypress.unit.json
{
"$schema": "https://raw.githubusercontent.com/cypress-io/cypress/develop/cli/schema/cypress.schema.json",
"integrationFolder": "./components",
"testFiles": "**/*.*spec.*",
}
Scripts with Ignore patterns
packages.json
{
"scripts": {
"cy:run": "cypress run",
"cy:open": "cypress open",
"cy:run:e2e": "cypress run --config ignoreTestFiles=!**/*/e2e/**/*",
"cy:run:unit": "cypress run -c ignoreTestFiles=**/*/e2e/**/*"
}
}
cypress.json
{
"$schema": "https://raw.githubusercontent.com/cypress-io/cypress/develop/cli/schema/cypress.schema.json",
"integrationFolder": "./",
"testFiles": "**/*.*spec.*",
}