React + Vue + 小程序测试详解

lsekfe

工具
　　单元测试要求单元之间没有耦合，每个单元各司其职，这样单元测试就会很明确，增加单元测试，和删除单元测试都比较容易，所以函数式测试风格，可能更加好表达测试...
　　单元测试只是手段，即使 100% 覆盖率的单元测试，也不能保证程序是没有 bug 的。
　　jest 一个功能齐全的测试 javascript 测试框架， mock、覆盖率、Snapshot快照、执行器、断言库和间谍 spy 功能等等...
　　enzyme 是 Airbnb 出品， 是一个工具库，让我们更方便的遍历、操作 React 组件输出的内容
　　enzyme-adapter-react-16
　　@vue/test-utils Vue 组件测试工具
　　miniprogram-simulate 微信小程序的自动化和单元测试
　　React 测试
　　配置
　　enzyme 有众多的组合提供才是

1. import Enzyme from 'enzyme';
   
2. import Adapter from 'enzyme-adapter-react-16';
   
3. 
   
4. Enzyme.configure({ adapter: new Adapter() });

复制代码

chai-enzyme with Mocha/Chai.
　　jasmine-enzyme with Jasmine.
　　jest-enzyme with Jest.
　　should-enzyme for should.js.
　　expect-enzyme for expect.
　　官方示例

1. import React from 'react';
   
2. import { expect } from 'chai';
   
3. import { shallow } from 'enzyme';
   
4. import sinon from 'sinon';
   
5. 
   
6. import MyComponent from './MyComponent';
   
7. import Foo from './Foo';
   
8. 
   
9. describe('<MyComponent />', () => {
   
10.   it('renders three <Foo /> components', () => {
    
11.     const wrapper = shallow(<MyComponent />);
    
12.     expect(wrapper.find(Foo)).to.have.lengthOf(3);
    
13.   });
    
14. 
    
15.   it('renders an `.icon-star`', () => {
    
16.     const wrapper = shallow(<MyComponent />);
    
17.     expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
    
18.   });
    
19. 
    
20.   it('renders children when passed in', () => {
    
21.     const wrapper = shallow((
    
22.       <MyComponent>
    
23.         <div className="unique" />
    
24.       </MyComponent>
    
25.     ));
    
26.     expect(wrapper.contains(<div className="unique" />)).to.equal(true);
    
27.   });
    
28. 
    
29.   it('simulates click events', () => {
    
30.     const onButtonClick = sinon.spy();
    
31.     const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    
32.     wrapper.find('button').simulate('click');
    
33.     expect(onButtonClick).to.have.property('callCount', 1);
    
34.   });
    
35. });
    
36. import React from 'react';
    
37. import sinon from 'sinon';
    
38. import { expect } from 'chai';
    
39. import { mount } from 'enzyme';
    
40. 
    
41. import Foo from './Foo';
    
42. 
    
43. describe('<Foo />', () => {
    
44.   it('allows us to set props', () => {
    
45.     const wrapper = mount(<Foo bar="baz" />);
    
46.     expect(wrapper.props().bar).to.equal('baz');
    
47.     wrapper.setProps({ bar: 'foo' });
    
48.     expect(wrapper.props().bar).to.equal('foo');
    
49.   });
    
50. 
    
51.   it('simulates click events', () => {
    
52.     const onButtonClick = sinon.spy();
    
53.     const wrapper = mount((
    
54.       <Foo onButtonClick={onButtonClick} />
    
55.     ));
    
56.     wrapper.find('button').simulate('click');
    
57.     expect(onButtonClick).to.have.property('callCount', 1);
    
58.   });
    
59. 
    
60.   it('calls componentDidMount', () => {
    
61.     sinon.spy(Foo.prototype, 'componentDidMount');
    
62.     const wrapper = mount(<Foo />);
    
63.     expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    
64.     Foo.prototype.componentDidMount.restore();
    
65.   });
    
66. });

复制代码

　Vue 测试
　　Vue 中的测试以 @vue/test-utils 作为核心，测试时还需要其他的 npm 包支持，和配置。
　　其他的 npm 包

1. # jest
   
2. yarn add jest @vue/test-utils --dev
   
3. 
   
4. # vue[url=home.php?mod=space&uid=24198]@next[/url] 选择一个适合版本，现在一般配合 @babel/core， 而非 babel-core
   
5. yarn add vue-jest@next --dev
   
6. 
   
7. # babel-jest
   
8. yarn add babel babel-jest
   
9. 
   
10. # jest 默认支持 commonjs 规范，如果我们要使用 esmodule, 那么就需要 babel 的插件转换语法
    
11. yarn add @babel/plugin-transform-modules-commonjs --dev

复制代码

　根据配置，进行相应的配置：
　　npm 脚本启动

1. {
   
2.     "scripts": {
   
3.         "test": "jest --watch --coverage"
   
4.     }
   
5. }

复制代码

　配置 jest

1. module.exports = {
   
2.   collectCoverage: true,
   
3.   collectCoverageFrom: [
   
4.     "./src/**/*.{js, vue}",
   
5.     "!node_modules/**"
   
6.   ],
   
7.   coverageDirectory: './coverage',
   
8.   coveragePathIgnorePatterns: [
   
9.     "/node_modules/"
   
10.   ],
    
11.   coverageReporters: [
    
12.     "json",
    
13.     "text",
    
14.     "lcov",
    
15.     "clover"
    
16.   ],
    
17.   moduleFileExtensions: [
    
18.     "js",
    
19.     "json",
    
20.     "jsx",
    
21.     "ts",
    
22.     "tsx",
    
23.     "node",
    
24.     "vue"
    
25.   ],
    
26.   testMatch: [
    
27.     "**/__tests__/**/*.[jt]s?(x)",
    
28.     "**/?(*.)+(spec|test).[tj]s?(x)"
    
29.   ],
    
30.   transform: {
    
31.     // 用 `babel-jest` 处理 `*.js` 文件
    
32.       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    
33.       // 用 `vue-jest` 处理 `*.vue` 文件
    
34.       ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    
35.   },
    
36.   transformIgnorePatterns: [
    
37.     "/node_modules/"
    
38.   ]
    
39. };

复制代码

babel 配置
　　我们使用 Taro-Next 生成的项，根据测试环境给不同的 babel 配置。

1. const isTest = process.env.NODE_ENV === 'test'
   
2. const presets = []
   
3. 
   
4. if (isTest) {
   
5.   presets.concat([
   
6.     '@babel/preset-env',
   
7.     {
   
8.       targets: {
   
9.         chrome: 52,
   
10.       },
    
11.     },
    
12.   ])
    
13. } else {
    
14.   presets.concat([
    
15.     'taro',
    
16.     {
    
17.       framework: 'vue',
    
18.       ts: false,
    
19.     },
    
20.   ])
    
21. }
    
22. module.exports = {
    
23.   presets: presets,
    
24.   plugins: [
    
25.     "@babel/plugin-transform-modules-commonjs"
    
26.   ]
    
27. }

复制代码

基本工作基本完成，接下来就可以快乐的进行测试了。
　　基础 API
mount 挂载组件
　　shallowMount 潜挂载组件
　　接收一个 Vue 组件作为参数。挂载之后就得到了一个 包裹了 组件 的 wrapper。这个 wrapper 具有访问，操作组件的能力。
　　官方示例

1. <template>
   
2.   <span>{{ message }}</span>
   
3. </template>
   
4. 
   
5. <script>
   
6.   export default {
   
7.     data () {
   
8.       return {
   
9.         message: 'hello!'
   
10.       }
    
11.     },
    
12.     created () {
    
13.       this.message = 'bye!'
    
14.     }
    
15.   }
    
16. </script>
    
17. // 导入 Vue Test Utils 内的 `shallowMount` 和待测试的组件
    
18. import { shallowMount } from '@vue/test-utils'
    
19. import MyComponent from './MyComponent.vue'
    
20. 
    
21. // 挂载这个组件
    
22. const wrapper = shallowMount(MyComponent)
    
23. 
    
24. // 这里是一些 Jest 的测试，你也可以使用你喜欢的任何断言库或测试
    
25. describe('MyComponent', () => {
    
26.   // 检查原始组件选项
    
27.   it('has a created hook', () => {
    
28.     expect(typeof MyComponent.created).toBe('function')
    
29.   })
    
30. 
    
31.   // 评估原始组件选项中的函数的结果
    
32.   it('sets the correct default data', () => {
    
33.     expect(typeof MyComponent.data).toBe('function')
    
34.     const defaultData = MyComponent.data()
    
35.     expect(defaultData.message).toBe('hello!')
    
36.   })
    
37. 
    
38.   // 检查 mount 中的组件实例
    
39.   it('correctly sets the message when created', () => {
    
40.     expect(wrapper.vm.$data.message).toBe('bye!')
    
41.   })
    
42. 
    
43.   // 创建一个实例并检查渲染输出
    
44.   it('renders the correct message', () => {
    
45.     expect(wrapper.text()).toBe('bye!')
    
46.   })
    
47. })

复制代码

　　潜挂载组件，调用函数之后，会得到一个 wrapper， wrapper 下面的一些方法是我们需要掌握的。
　　wrapper.vm
　　wrapper.text()
　　wrapper.html() 组件渲染出的 html
　　wrapper.contains('xxx') 已包含的元素
　　wrapper.find('xxx') 找到元素，模拟用户交互
　　测试 Vue Props
　　测试 props 和 computed 的默认值。

1. import { mount } from '@vue/test-utils'
   
2. import Icon from '../index'
   
3. 
   
4. test('has icon component', () => {
   
5.   const wrapper = mount(Icon)
   
6.   console.log("name ", wrapper.vm.name)
   
7.   expect(wrapper.vm.name).toBe('arrow')
   
8.   expect(wrapper.vm.width).toBe("30")
   
9.   expect(wrapper.vm.height).toBe("30")
   
10.   expect(wrapper.vm.color).toBe("#f00")
    
11.   expect(wrapper.vm.iconCls).toBe("van-icon van-icon-arrow")
    
12.   expect(wrapper.vm.iconStyle).toEqual({
    
13.     width: '30px',
    
14.     height: '30px',
    
15.     lineHeight: '30px',
    
16.     color: '#f00'
    
17.   })
    
18. })

复制代码

　组件中 props 包含了 name、width、height、color, 计算属性： iconCls、iconStyles
　　测试 props 的传入值
　　我们需要给 mount 传入第二个参数，一些选项数据：

1. test('props custom params', () => {
   
2.   const wrapper = mount(Icon, {
   
3.     propsData: {
   
4.       name: 'good-job-o',
   
5.       width: '40',
   
6.       height: '40',
   
7.       color: 'blue'
   
8.     }
   
9.   })
   
10. 
    
11.   expect(wrapper.props().name).toBe('good-job-o') // 3 passed, 3 total
    
12. })

复制代码

小程序测试
　　小程序可以进行组件级别的单元测试，也可以进行页面级别的测试。
　　自定义组件测试
　　工具：miniprogram-simulate安装，组件化单元测试，不依赖小程序的运行时。读取组件直接，进行测试。
　　注意：小程序的单元测试能力是很有限的。

1. yarn add miniprogram-simulate --dev
   

复制代码

官方示例

1. // /test/components/index.test.js
   
2. const simulate = require('miniprogram-simulate')
   
3. 
   
4. test('components/index', () => {
   
5.     const id = simulate.load('/components/index') // 此处必须传入绝对路径
   
6.     const comp = simulate.render(id) // 渲染成自定义组件树实例
   
7.     const parent = document.createElement('parent-wrapper') // 创建父亲节点
   
8.     comp.attach(parent) // attach 到父亲节点上，此时会触发自定义组件的 attached 钩子
   
9.     const view = comp.querySelector('.index') // 获取子组件 view
   
10.     expect(view.dom.innerHTML).toBe('index.properties') // 测试渲染结果
    
11.     expect(window.getComputedStyle(view.dom).color).toBe('green') // 测试渲染结果
    
12. })

复制代码

页面级别的测试
　　页面级别的测试叫小程序自动化，自动化可以帮助完成很多重复的任务。
　　打开项目
　　编译预览
　　上传文件
　　...
　　小程序为自动化提供了一个重要的 SDK： miniprogram-automator, 注意和小程序单元测试 miniprogram-simulate 是不一样的。
　　miniprogram-automator 需要运行，配置启动微信小程序开发工具。
　　官方示例

1. const automator = require('miniprogram-automator')
   
2. 
   
3. automator.launch({
   
4.   cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
   
5.   projectPath: 'path/to/project', // 项目文件地址
   
6. }).then(async miniProgram => {
   
7.   const page = await miniProgram.reLaunch('/page/component/index')
   
8.   await page.waitFor(500)
   
9.   const element = await page.$('.kind-list-item-hd')
   
10.   console.log(await element.attribute('class'))
    
11.   await element.tap()
    
12. 
    
13.   await miniProgram.close()
    
14. })

复制代码