vite + vue3.0使用jest测试初体验（一）

使用vite + vue 3.0 进行单元测试 安装环境

使用的是 vue官方推荐插件@vue/test-utils进行测试, 考虑到某一些库还是es6的代码未编译，所以也将babel添加入配置，以防万一（如果不需要可以删除，暂时只是加入方便以后查阅）。

安装插件

1\. 安装jest, 这里我使用的是全局安装,可局部安装

    ```npm i jest -g```

2\. 安装test

    ** 如果是vue3.0\. 此处一定要加next **

    ``` npm i -D jest-serializer-vue vue-jest@next @vue/test-utils```

3\. 安装所需要的babel插件

    ```npm i babel-jest babel-core@^7.0.0-bridge.0 @babel/plugin-transform-runtime @babel/env -D ```

4\. 可视化报告

    ``` npm i -D jest-html-report```

在项目中添加jest.config.json

```

{   

    "moduleFileExtensions": [

        "js",

        "json",

        "vue"

    ],

    "transform": {

        "^.+\\.js$": "/node_modules/babel-jest",

        ".*\\.(vue)$": "/node_modules/vue-jest"

    },

    "snapshotSerializers": [

        "/node_modules/jest-serializer-vue"

    ],

    "moduleNameMapper": {

        "^@/(.*)$": "/src/$1",

    },

    "transformIgnorePatterns": [

        "node_modules/(?!(yourModuleName))"

    ],

    "reporters": [

        "default",

        ["./node_modules/jest-html-reporter", {

        "pageTitle": "Test Report"

        }]

    ]

}

```

配置说明：

    moduleFileExtensions： 需要配置文件名后缀

    transform： 如何转换

    snapshotSerializers： 将保存的快照测试结果序列化，使得其美观

    moduleNameMapper： 处理别名 @ 代表 src

    transformIgnorePatterns： 不进行匹配的目录

    testMatch: 匹配那些文件进行测试

    reporters: 报告配置

在项目中添加 babel.config.js

```

module.exports = {

    env: {

        test: {

            presets: [[

                '@babel/env',

                {

                    modules: 'auto', // 现在不能通过webpack来解析s6 module，需要使用babel来解析，所以要开启

                    targets: {

                    node: 'current' // 指定环境为当前node版本，减少解析不识别语法的范围

                    }

                }

            ]],

            plugins: [[

                '@babel/plugin-transform-runtime', {

                    corejs: 2,

                    useESModules: false // 不允许使用es modules，babel需要通过@babel/plugin-transform-modules-commonjs将es module转换为commonjs模块解析

                }

            ]]

        }

    }

}

```

小小测试

这是一个很简单的单元测试，测试一个message组件,新增一个message.spec.js的文件

• 代码块：

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

    const MessageComponent = {

        template: '
{{msg}}
',

        props: ['msg']

    }

    test('display message', () => {

        const wrapper = mount(MessageComponent, {

            props: {

                msg: 'Hello world'

            }

        })

        expect(wrapper.text()).toContain('Hello world')

    })

• 运行方式

  1. 终端输入 jest 直接运行

  2. 在 package.json 配置命令

  
  {
  
      "script": {
  
          "test": "jest"
  
      }
  
  }
  
  

jest 常用语法留存(方便查阅，具体得看官方文档)

1\. mount() render component

2\. dom用法：

  1\. get/find, 查找一个函数，跟document.queryselector 类似

  2\. trigger： 触发一个事件

  3\. setValue: set一个值 在使用此函数请使用async函数

  4\. findAll: 找到所有的 类似 document.queryselectorAll 

  5\. exists() 检查 v-if

  6\. isVisible 检查 v-show

  7\. setProps 在挂载之后设置props的值 在使用此函数请使用async函数

  8\. attributes()  所有的属性

  9\. getComponent() 得到子组件

  10\. forceUpdate() 更新

3\. assert 断言

  11\. toHaveLenth: 得到lenth

  12\. toContain: 渲染出的内容

  13\. toHaveProperty 判断是否有这个用法

  14\. toEqual 等于

  15\. toBe

  16\. not() 非

  17\. flushPromises() dom updates

4\. emitted 得到所有的emit触发事件

遇到的问题（会持续更新）

1\. svg

  解决答案：使用插件 jest-svg-transformer, 并在jest.config.js添加

2\. toBe 与 toEqual 的区别

  解决答案： toBe 常用于非引用类型（基础类型）的值对比， toEqual 可以用于引用类型的深度对比 ，正则属于引用类型同使用 toEqual

3\. get 与 find 的区别 （findComponent与getComponent的区别同下）

  解决答案：get 可以抛出错误，find不会抛出错误 具体可查看官方文档 https://next.vue-test-utils.vuejs.org/api/#get

4\. 如何重新设置 reactive 里面的值

  解决答案： 如果使用的是data的方式渲染可使用setData的方式来更改， 如果是使用ref 或者 reactive的方式来写，可使用 wrapper.vm.yoursParams 的方式来设置

总结

单元测试可以弥补无法测试wx支付的功能，以及检查重塑代码，检查代码可见bug，例如弹窗不展示等等。下一节我会具体列举出一个比较复杂的微信测试的demo

参考链接

1.https://cloud.tencent.com/developer/article/1729468

2. https://next.vue-test-utils.vuejs.org/api/