The installation

Vue 2

yarn add cypress @cypress/vue @cypress/webpack-dev-server --dev
Copy the code

Vue 3

yarn add cypress @cypress/vue@next @cypress/webpack-dev-server --dev
Copy the code

use

Create files and directories

Create cypress/plugins/index.js at the same level as node_modules

incypress/plugins/index.jsconfigure

const { startDevServer } = require('@cypress/webpack-dev-server')
const webpackConfig = require('@vue/cli-service/webpack.config.js')

module.exports = (on, config) => {
  on('dev-server:start', options =>
    startDevServer({
      options,
      webpackConfig
    })
  )

  return config
}
Copy the code

addcypress.jsonConfiguration files (add file types to be tested)

File hierarchy sum

{
  "component": {
    "componentFolder": "src",
    "testFiles": "**/*.spec.js"
  }
}
Copy the code

Add test cases

For the SRC/components/HelloWorld. Vue add test cases SRC/components/HelloWorld. Spec. Js

mport { mount } from '@cypress/vue' import HelloWorld from './HelloWorld.vue' describe('HelloWorld', () => { it('renders a message', () => { const msg = 'Hello Cypress Component Testing! ' mount(HelloWorld, { propsData: { msg } }) cy.get('h1').should('have.text', msg) }) })Copy the code

Run the test

  • A:Run directlyyarn cypress open-ct
  • Method 2: 在 package.josnIn the configuration
"scripts": {
    "openct":"cypress open-ct" 
  },
Copy the code

Then run yarn Openct

advantages

  • A warm restart
  • Run in a browser environment
  • Deebug in the browser

Component test classification

e2e testcontainscomponents test , components testcontainsunit test. whenunit test(Unit tests) pass, pass againcomponents test(Component test), and finally passede2e test(End-to-end testing). The schematic diagram is as follows:

Test-driven Development (TDD)

  1. Add a test and you’re bound to fail
  2. Run all tests. See if any of the tests failed
  3. Write just enough code to pass all the tests
  4. Run all tests. If any of the tests fail, return to Step 3. Otherwise, continue
  5. Refactor the code
  6. If you add a new test, repeat from Step 1

The link address

  • Cypress’s official website
  • Used in the vue
  • Test-driven Development (TDD)