分类
折腾 码农

对mpvue进行前端测试

采用Vue.js的测试方法,为mpvue添加测试。

配置

  1. 打开package.json,添加如下内容(注意自行在必要的地方添加逗号):
    "scripts"中添加"test": "jest"
    "dependencies"中添加"vue": "^2.4.4"
    "devDependencies"中添加

    “@vue/test-utils”: “^1.0.0-beta.13”
    “jest”: “^21.2.1”
    “vue-jest”: “^2.6.0”
    “vue-template-compiler”: “^2.4.4”

添加(与scripts同级)

        "jest": {
            "moduleFileExtensions": [
                "js",
                "json",
                "vue"
            ],
            "transform": {
              "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
              ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
            },
            "moduleNameMapper": {
              "^@/(.*)$": "<rootDir>/src/$1"
            }
          }

2. 在命令行中进入对应目录,输入npm install

查看配置效果

  1. 创建test文件夹(与package.json同级目录),新建test.js文件,输入以下内容:
        describe('Our test file', () => {
    
              it('should be working now', () => {
                expect('a').toBe('a')
              })
    
        })
    
  2. 在命令行中输入npm test
  3. 我们应该会看到如下内容:

编写真正的测试文件

  1. 假设我们想测试的组件为components文件夹下的card(mpvue模板生成的组件)
  2. 不用对card.vue文件做任何改动(主要是不需要添加name):
  3. test.js内容修改为:
        import { mount } from '@vue/test-utils'
        import card from '../src/components/card'
    
        describe('card', () => {
            const wrapper = mount(card)
    
            it('<p> tag should have class: card', () => {
                let p =  wrapper.find('p')
                expect(p.classes()).toContain('card')
            })
    
        })
    
  4. 在命令行中输入npm test
  5. 我们应该会看到如下内容:

注意事项、参考资料

  1. 文件命名:xxx.vue对应的测试文件名为xxx.spec.js
  2. 这里使用的是jest,而不是mocha
  3. 参考资料(包括更多语法):https://vue-test-utils.vuejs.org/zh/guides/#%E8%B5%B7%E6%AD%A5