Cypress+Vue 元件測試 (component testing)

接續「e2e 測試工具 Cypress 安裝及介紹」，除了用在實際開啟瀏覽器的測試，cypress也支援元件測試，需要安裝相關的套件將元件render出來。

安裝

npm install --save-dev cypress @cypress/vue @cypress/webpack-dev-server webpack-dev-server

如果是 Vue3 ，請記得把 @cypress/vue 換成：

npm install --save-dev @cypress/vue@next

設定

先到 cypress/plugins/index.js 的註冊 dev-server:start 事件，再來要注意 require('@vue/cli-service/webpack.config.js')這段，你的專案不見得有安裝這個套件，你可以建立自己的webpack設定，並替換上正確的路徑。

// cypress/plugins/index.js

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

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

若我們要測試的元件內容為：

<!-- Button.vue -->
<template>
  <button>
    <slot />
  </button>
</template>

在測試時，vue2和vue3引入 mount 的寫法相同，並且將設定元件所需的輸入

import {mount} from '@cypress/vue'
import Button from './Button.vue';

it('Button', () => {
  mount(Button, {
    slots: {
      default: 'Test button',
    },
  });

  cy.get('button').contains('Test button').click();
});

執行

提供 GUI 介面操作

npx cypress open-ct

無GUI，在 Terminal 上執行

npx cypress run-ct

參考文件: https://docs.cypress.io/guides/component-testing/introduction