前端自动化测试实践04—jest-vue项目之TDD&BDD 【原创】

前端自动化测试实践04—jest-vue项目之TDD&BDD

 

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com

本节代码地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自动化测试目录

1. 项目构建

本节将以 TDD 的方式来搭建一个 TodoList 的 vue 项目。如何搭建包含 jestvue 项目已经在第一节 jest-vue前端自动化测试实践01 中已经进行过介绍,其中,在 jest 的配置文件 jest.config.js 中,需要注意 testMatch 配置项,它指定了测试用例文件的路径,这里我们习惯性设置为 __tests__ 文件夹下的以 .test 加多种后缀结尾的文件。

testMatch: [
    '**/__tests__/**/*.test.(js|jsx|ts|tsx)'
]

在配置过启动命令 "test:unit": "vue-cli-service test:unit --watch" 后就可以愉快地以 watch 方式将 jest 在 shell 中实时运行起来,每次修改代码后,jest 都会自动执行测试用例。

$ npm run test:unit

还可以配置测试覆盖率命令 "test:cov": "vue-cli-service test:unit --coverage"

$ npm run test:cov

生成的报告也可以在浏览器中打开,更加直观清晰。

2. 项目目录结构

项目的目录结构组织如下:

├── src
│   ├── sssets
│   ├── containers
│   │   └── TodoList    
│   │       ├── __mocks__                测试mocks文件
│   │       ├── __tests__                测试用例文件
│   │       │   ├── unit                 单元测试
│   │       │   │   └── TodoList.test.js
│   │       │   └── integration          集成测试
│   │       │       └── store.test.js
│   │       ├── components               子组件
│   │       │   ├── Header.vue
│   │       │   └── UndoList.vue
│   │       │   
│   │       └── TodoList.vue             TodoList父vue组件
│   │
│   ├── utils
│   │   └── testUtils.js                 存放测试工具公共工具
│   ├── App.vue                          vue-App
│   └── main.js                          入口文件
│
├── public
├── jest.config.js                       jest配置文件
├── ...
└── package.json

3. vue 组件测试方法

3.1 组件浅渲染和深渲染

在 vue 项目中测试 vue 组件,vue 官方提供了 @vue/test-utils 工具用于测试 vue 组件,其中包含 mountshallowMount 方法,用于渲染 vue 组件。

import { mount, shallowMount } from '@vue/test-utils'

不同的是,mount 方法会渲染完整的组件,包括子组件,适合 BDD 和集成测试,而 shallowMount 方法只会渲染当前组件,因此速度更快,效率更高,更加适合 TDD 和单元测试。为了方便获取测试需要的 DOM 元素,可以将获取 DOM 元素的方法进行封装,在 testUtils.js 中定义 findTestWrapper 方法如下:

export const findTestWrapper = (wrapper, tag) => {
    return wrapper.find(`[data-test="${tag}"]`)
}

3.2 vuex 的使用

可以通过在 mount 中传入 vuex 对象实现对 vuex 的引用:

import store from '@/store'
const wrapper = mount(TodoList, { store })

3.3 组件异步测试

对于异步请求,可以使用 vue 的 vm.$nextTick 方法实现异步数据的渲染。

4. TDD & BDD

在 TDD 中,由于是测试驱动开发,因此往往先进行需求分析再根据需求编写测试用例,最后才进行项目业务逻辑编码满足用例,因此用于单元测试,而 BDD 则相反,在编写完业务逻辑代码后编写测试用例,因此是从功能角度出发,更加适合集成测试,具体代码可以见 github:

本节代码地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自动化测试目录

4.1 组件

对于 vue 测试工具渲染出的组件,自动化测试,我们一般可以考虑生成快照监测dom结构变化进行测试。还可以测试组件中方法是否触发,以及查找其子组件等。

expect(wrapper).toMatchSnapshot() // 生成快照
wrapper.emitted().add             // 组件中 add 方法是否被触发
wrapper.find(Header)              // 查找子组件 Header

4.2 vm 实例

大部分的自动化测试,都是通过 vm 实例上的 data 变化来测试的,可以获取对应的 data 值,也可以通过 vm 调用相关方法。

wrapper.vm.$data.inputValue         // 获取 inputValue
wrapper.vm.addUndoItem('csxiaoyao') // 执行 addUndoItem 方法
wrapper.vm.$emit('add', content)    // 触发外部 add 方法

4.3 jsDom 操作

jest 提供了一套 node 环境下的 dom,在获取到指定的 dom 元素后,可以对 dom 元素执行各种操作:

const input = findTestWrapper(wrapper, 'input')
input.exists()                // 获取dom存在性
input.setValue('csxiaoyao')   // 给dom赋值
input.trigger('keyup.enter')  // 触发dom方法
input.trigger('change')       // 触发dom方法

4.4 vuex

vuex 数据操作

store.state.inputValue                        // 数据获取
store.commit('changeInputValue', 'csxiaoyao') // 数据设置

4.5 异步操作

定时器测试,可以借助 vm.$nextTick 方法和 jest 定时器操作实现

beforeEach(() => {
    jest.useFakeTimers()
})
it(`
  1. 用户进入页面时,等待 3s
  2. 列表应该展示远程返回的数据
`, (done) => {
    const wrapper = mount(TodoList, { store }) // 传入 store
    jest.runAllTimers()
    wrapper.vm.$nextTick(() => {
        const listItems = findTestWrapper(wrapper, 'list-item')
        // 不能直接判断,因为异步操作在 mounted 之后
        expect(listItems.length).toBe(2)
        done()
    })
})

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 前端自动化测试实践04—jest-vue项目之TDD&BDD 【原创】

赞 (0) 打赏

评论 0

如果觉得有用就请我喝一杯咖啡吧

支付宝扫一扫打赏

微信扫一扫打赏