2022年2月22日 星期二

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