美文网首页
vite + vue3.0使用jest测试初体验(一)

vite + vue3.0使用jest测试初体验(一)

作者: 木槿流年_木笔 | 来源:发表于2021-10-22 14:21 被阅读0次

    使用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$": "<rootDir>/node_modules/babel-jest",
    
            ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    
        },
    
        "snapshotSerializers": [
    
            "<rootDir>/node_modules/jest-serializer-vue"
    
        ],
    
        "moduleNameMapper": {
    
            "^@/(.*)$": "<rootDir>/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: '<p>{{msg}}</p>',
    
            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

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

    相关文章

      网友评论

          本文标题:vite + vue3.0使用jest测试初体验(一)

          本文链接:https://www.haomeiwen.com/subject/hqocaltx.html