# 运行全部测试
npm run test
# 运行单元测试
npm run test:unit
# 运行服务端渲染测试
npm run test:node
# 运行监视模式
npm run test:watch
# 生成测试覆盖率报告
npm run test:coverage
- test 测试目录 |-- e2e UI 测试 |-- unit 单元测试 |-- ssr 服务端测试 |-- ...
npm run test:unit
- test/unit 目录中,创建对应的组件目录,用于存放测试文件
- index.test.js 用于测试组件较细粒度的属性事件方法
- demo.test.js 用于测试组件 demo 是否正常工作
- 每个组件至少有两个单元测试文件,一个是测试源代码的单元测试文件 index.test.js,另一个则是测试组件示例代码的单元测试文件 demo.test.js
- 用例书写请使用:vue-test-utils
- 断言库请使用:https://jestjs.io/docs/en/expect
需要对组件的 props/event/slot/methods 分别覆盖测试。具体组织方式可以参考 button,简单的渲染测试可以直接使用 snapshot
可以指定 --testPathPattern 以跑特定的测试文件,例如只想看 button 的测试结果:
npx jest --testPathPattern test/unit/button/* --config script/test/jest.unit.conf.js
更新快照
npx jest --testPathPattern test/unit/button/* --config script/test/jest.unit.conf.js --u
可以加上--testNamePattern=<regex>
参数跑指定用例,例如
npx jest --testPathPattern test/unit/transfer/util --testNamePattern='getLeafCount result test 1' --config script/test/jest.unit.conf.js
如果确认是预期的修改造成的 snapshot 变化,可以加上 -u 参数更新 snapshot:
npx jest --testPathPattern test/unit/button/* --config script/test/jest.unit.conf.js -u
可以浏览器打开根目录下的 test-report.html(git ignored) 查看测试报告
服务端渲染测试主要利用 node 环境下的测试快照,与已有 jsdom 环境快照进行对比
npm run test:node
cypress 可以覆盖 Puppeteer 的 E2E 测试场景,优先选择了 cypress 作为测试框架,它能实现以下功能:
- 开箱即用
- 官方 doc 很多,利于开发与维护
- gui 界面( env:google 浏览器),可边测边调整
- 自定义 commands
- 自定义 fixture,可 mock 数据
- 支持 ci 运行测试,可上传到 bashBoard
- 关注测试覆盖率( Chrome 的 coverage )
- 截图功能,用例失败的场景节点会被截图保存,利于复现
- 录屏功能,每个测试用例都会记录下来( MP4 )
- 社区其他的插件支持
npm run cypress
npm run cypress-gui
使用 BDD 模式进行开发,必须在流水线里面通过单元测试。
describe('测试按钮组件', () => {
beforeEach(() => {
// 打开某个页面
cy.visit('/#/components/button');
});
// 测试用例定义
it('case1: 测试三种按钮类型,内容,渲染正确的类型跟内容', function() {
});
it('case2: 测试按钮尺寸,渲染正确的大小', function() {
});
it('case3: 测试带图标按钮,按钮内容里的图标位置', function() {
});
it('case4: 测试loading状态的按钮', function() {
});
});
describe('测试按钮组件', () => {
beforeEach(() => {
// 打开某个页面
cy.visit('/#/components/button');
});
// 测试用例定义
it('case1: 测试三种按钮类型,内容,渲染正确的类型跟内容', function() {
cy.get('.button')
.should(ele => {
expect(ele).to.have.text('按钮1');
});
...
});
it('case2: 测试按钮尺寸,渲染正确的大小', function() {
});
it('case3: 测试带图标按钮,按钮内容里的图标位置', function() {
});
it('case4: 测试loading状态的按钮', function() {
});
});
e2e 测试建议放在 test/e2e/ 目录下面 common script 配置文件(包含测试相关配置文件) src test 测试目录 |-- e2e // 这里面放 e2e 的测试内容 |-- unit |-- ssr |-- ...