接續「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