【学习笔记】Vue中使用cypress进行组件测试

安装

Vue 2

yarn add cypress @cypress/vue @cypress/webpack-dev-server --dev

Vue 3

yarn add cypress @cypress/vue@next @cypress/webpack-dev-server --dev

使用

创建文件和目录

和 node_modules 同级创建 cypress/plugins/index.js

在`cypress/plugins/index.js`进行配置

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
}

添加`cypress.json` 配置文件（添加需要测试文件类型）

文件层级和

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

添加测试用例

为 src/components/HelloWorld.vue 添加测试用例 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)
  })
})

运行测试

方式一: 直接运行 yarn cypress open-ct
方式二： 在 package.josn 中配置

"scripts": {
    "openct":"cypress open-ct" 
  },

然后运行：yarn openct

优点

热重启
运行在浏览器环境中
在浏览器中deebug

组件测试分级

e2e test 包含 components test , components test 包含 unit test。当 unit test（单元测试）通过时，再通过 components test（组件测试），最后通过 e2e test （端到端测试）。示意图如下：

测试驱动开发（TDD）

添加一个测试，肯定会失败
运行所有测试。看看是否有任何测试失败
只写足够的代码来通过所有测试
运行所有测试。如果任何测试失败，请返回步骤3.否则，继续
重构代码
如果添加了新测试，请从步骤1开始重复