什么是Cypress？
Cypress是一个基于JavaScript的前端测试工具，它允许对浏览器中运行的任何内容进行快速、简单、可靠的测试，并且覆盖了测试金字塔模型的所有测试类型，包括界面测试、集成测试和单元测试。Cypress的特点在于它将测试运行在一个单独的Chrome浏览器实例中，从而更好地模拟用户操作。
安装
yarn add -D cypress || npm install -D cypress
//package.json
"scripts": {
"cypress:open": "cypress open",
//...
}配置
执行 cypress open 打开cypress 启动页， 选择 E2E(端对端测试)或者 compoent(组件测试). 之后根据提示进行操作。 安装依赖 - 添加文件 - 选择浏览器测试
配置全局变量(可选)
// cypress.config.js
module.exports = {
env: {
myGlobalVar: 'someValue'
}
};配置全局样式，在component文件中直接引入，全局样式
// cypress/support/component.ts
import '@/assets/styles/index.css'配置全局方法(自定义方法)
// cypress/support/commands.ts
Cypress.Commands.add('mount', (component, options = {}) => {
options.global = options.global || {}
options.global.stubs = options.global.stubs || {}
options.global.stubs.transition = false
options.global.components = options.global.components || {}
options.global.plugins = options.global.plugins || []
const {/* store = getStore(), */ ...mountOptions} = options
options.global.plugins.push({
install(app) {
app.use(i18n)
},
})
return mount(component, mountOptions)
})简单示例
在 components 目录添加组件对应的测试文件
//Head.cy.ts
import Head from './Head.vue'
import {i18n} from '../modules/i18n'
import {router} from '../modules/route'
describe('<Head />', () => {
it('renders', () => {
cy.mount(Head,{
global: {
plugins:[i18n,router]
}
})
})
})//Head.ts
export function testName (name) {
return name
}问题集合
执行vitestui 报错 Cannot read properties of undefined (reading ‘config’)
vitest 和 vitest/ui 的版本和 vite 不匹配
pnpm i vitest@latest @vitest/ui@latest -D