使用 cypress 進行 E2e Testing，針對比較常用的部分整理從 Cypress 9 升級到 10 一些異動，最大的差別是不再支援 cypress.json，並移除了 plugins 目錄。
安裝 cypress 10
npm install --save-dev cypress@10
如何升級至 cypress 10
主要針對 e2e 調整的部分進行說明，啟動 cypress 時，原本會讀取根目錄建立 cypress.json的設定，cypress 10不再支援。檔案格式可以支援 js/ts，底下範例以cypress.config.js為主，另外參數的設定也做出調整：
baseUrl
從設定在最上層，改成專屬 e2e 測試的設定，若只做 component testing 就不需要設定這個參數，讓 e2e / component testing 的設定更一目瞭然。
Before cypress.json
{
'baseUrl': 'http://localhost:1234'
}
After cypress.config.js
const { defineConfig } = require('cypress');
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234'
}
});
pluginsFile
這個設定不需要，直接移除即可。
Before cypress.json
{
'pluginsFile': 'cypress/plugins/index.js'
}
setupNodeEvents
移除 pluginsFile 的設定後，原本的內容也直接移到 cypress.config.js 進行設定，過去版本9若同時使用 component / e2e testing，可以將設定直接分開來寫。
Before cypress/plugins/index.jsmodule.exports = (on, config) => {
if (config.testingType === 'component') {
// component testing dev server setup code
// component testing node events setup code
} else {
// e2e testing node events setup code
}
};
After cypress.config.js
const { defineConfig } = require('cypress');
module.exports = defineConfig({
component: {
devServer(cypressConfig) {
// component testing dev server setup code
},
setupNodeEvents(on, config) {
// component testing node events setup code
},
},
e2e: {
setupNodeEvents(on, config) {
// e2e testing node events setup code
},
},
});
完整內容請參考官網升級指引
相關文章：
