温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

前端Vue单元测试知识点有哪些

发布时间:2021-12-20 16:32:50 来源:亿速云 阅读:149 作者:iii 栏目:开发技术

本篇内容介绍了“前端Vue单元测试知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    一、为什么需要单元测试

    单元测试是用来测试项目中的一个模块的功能,如函数、类、组件等。单元测试的作用有以下:

    • 正确性:可以验证代码的正确性,为上线前做更详细的准备;

    • 自动化:测试用例可以整合到代码版本管理中,自动执行单元测试,避免每次手工操作;

    • 解释性:能够为其他开发人员提供被测模块的文档参考,阅读测试用例可能比文档更完善;

    • 驱动开发、指导设计:提前写好的单元测试能够指导开发的API设计,也能够提前发现设计中的问题;

    • 保证重构:测试用例可以多次验证,当需要回归测试时能够节省大量时间。

    二、如何写单元测试

    测试原则

    • 测试代码时,只考虑测试,不考虑内部实现

    • 数据尽量模拟现实,越靠近现实越好

    • 充分考虑数据的边界条件

    • 对重点、复杂、核心代码,重点测试

    • 测试、功能开发相结合,有利于设计和代码重构

    编写步骤

    • 准备阶段:构造参数,创建 spy 等

    • 执行阶段:用构造好的参数执行被测试代码

    • 断言阶段:用实际得到的结果与期望的结果比较,以判断该测试是否正常

    • 清理阶段:清理准备阶段对外部环境的影响,移除在准备阶段创建的 spy 等

    三、测试工具

    单元测试的工具可分为三类:

    • 测试运行器(Test Runner):可以模拟各种浏览器环境,自定义配置测试框架和断言库等,如Karma.

    • 测试框架:提供单元测试的功能模块,常见的框架有Jest, mocha, Jasmine, QUnit.

    • 工具库:assert, should.js, expect.js, chai.js等断言库,enzyme渲染库,Istanbul覆盖率计算。

    这里,我们将使用 Jest 作为例子。Jest 功能全面,集成了各种工具,且配置简单,甚至零配置直接使用。

    四、Jest入门

    Jest 官网的描述是这样的:

    Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

    安装

    yarn add --dev jest
    # or
    # npm install -D jest

    简单示例

    从官网提供的示例开始,测试一个函数,这个函数完成两个数字的相加,创建一个 sum.js 文件︰

    function sum(a, b) {
      return a + b;
    }
    module.exports = sum;

    然后,创建 sum.test.js 文件︰

    const sum = require('./sum');
    
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });
    
    package.json 里增加一个测试任务:
    {
      "scripts": {
        "test": "jest"
      }
    }

    最后,运行 yarn test 或 npm run test ,Jest将打印下面这个消息:

    PASS  ./sum.test.js
    ✓ adds 1 + 2 to equal 3 (5ms)

    至此,完成了一个基本的单元测试。

    注意:Jest 通过用 JSDOM 在 Node 虚拟浏览器环境模拟真实浏览器,由于是用 js 模拟 DOM, 所以 Jest 无法测试样式 。Jest 测试运行器自动设置了 JSDOM。

    Jest Cli

    你可以通过命令行直接运行Jest(前提是jest已经加到环境变量PATH中,例如通过 yarn global add jest 或 npm install jest --global 安装的 Jest) ,并为其指定各种有用的配置项。如:

    jest my-test --notify --config=config.json

    Jest 命令有以下常见参数:

    • --coverage 表示输出单元测试覆盖率,覆盖率文件默认在 tests/unit/coverage/lcov-report/index.html;

    • --watch 监听模式,与测试用例相关的文件更改时都会重新触发单元测试。

    更多选项查看Jest CLI Options.

    使用配置文件

    使用 jest 命令可生成一个配置文件:

    jest --init

    过程中会有几个选项供你选择:

    √ Would you like to use Typescript for the configuration file? ... no
    √ Choose the test environment that will be used for testing » jsdom (browser-like)
    √ Do you want Jest to add coverage reports? ... yes
    √ Which provider should be used to instrument code for coverage? » babel
    √ Automatically clear mock calls and instances between every test? ... yes

    配置文件示例(不是基于上述选择):

    // jest.config.js
    const path = require('path')
    
    module.exports = {
        preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
        rootDir: path.resolve(__dirname, './'),
        coverageDirectory: '<rootDir>/tests/unit/coverage',
        collectCoverageFrom: [
            'src/*.{js,ts,vue}',
            'src/directives/*.{js,ts,vue}',
            'src/filters/*.{js,ts,vue}',
            'src/helper/*.{js,ts,vue}',
            'src/views/**/*.{js,ts,vue}',
            'src/services/*.{js,ts,vue}'
        ]
    }

    使用 Babel

    yarn add --dev babel-jest @babel/core @babel/preset-env

    可以在工程的根目录下创建一个babel.config.js文件用于配置与你当前Node版本兼容的Babel:

    // babel.config.js
    module.exports = {
      presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
    };

    vue-cli 中使用 Jest

    在项目中安装 @vue/cli-plugin-unit-jest 插件,即可在 vue-cli 中使用 Jest:

    vue add unit-jest
    # or
    # yarn add -D @vue/cli-plugin-unit-jest @types/jest
    "scripts": {
        "test:unit": "vue-cli-service test:unit --coverage"
    },

    @vue/cli-plugin-unit-jest 会在 vue-cli-service 中注入命令 test:unit,默认会识别以下文件:<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) 执行单元测试,即 tests/unit 目录下的 .spec.(js|jsx|ts|tsx) 结尾的文件及目录名为 __tests__ 里的所有 js(x)/ts(x) 文件。

    常见示例

    判断值相等

    toBe() 检查两个基本类型是否精确匹配:

    test('two plus two is four', () => {
      expect(2 + 2).toBe(4);
    });

    toEqual() 检查对象是否相等:

    test('object assignment', () => {
      const data = {one: 1};
      data['two'] = 2;
      expect(data).toEqual({one: 1, two: 2});
    });
    检查类false值
    • toBeNull 只匹配 null

    • toBeUndefined 只匹配 undefined

    • toBeDefined 与 toBeUndefined 相反

    • toBeTruthy 匹配任何 if 语句为真

    • toBeFalsy 匹配任何 if 语句为假

    示例:

    test('null', () => {
      const n = null;
      expect(n).toBeNull();
      expect(n).toBeDefined();
      expect(n).not.toBeUndefined();
      expect(n).not.toBeTruthy();
      expect(n).toBeFalsy();
    });
    
    test('zero', () => {
      const z = 0;
      expect(z).not.toBeNull();
      expect(z).toBeDefined();
      expect(z).not.toBeUndefined();
      expect(z).not.toBeTruthy();
      expect(z).toBeFalsy();
    });
    数字大小比较
    test('two plus two', () => {
      const value = 2 + 2;
      expect(value).toBeGreaterThan(3);
      expect(value).toBeGreaterThanOrEqual(3.5);
      expect(value).toBeLessThan(5);
      expect(value).toBeLessThanOrEqual(4.5);
    
      // toBe and toEqual are equivalent for numbers
      expect(value).toBe(4);
      expect(value).toEqual(4);
    });

    对于比较浮点数相等,使用 toBeCloseTo 而不是 toEqual,因为你不希望测试取决于一个小小的舍入误差。

    test('两个浮点数字相加', () => {
      const value = 0.1 + 0.2;
      //expect(value).toBe(0.3);           这句会报错,因为浮点数有舍入误差
      expect(value).toBeCloseTo(0.3); // 这句可以运行
    });
    字符串比较

    可以使用正则表达式检查:

    test('there is no I in team', () => {
      expect('team').not.toMatch(/I/);
    });
    
    test('but there is a "stop" in Christoph', () => {
      expect('Christoph').toMatch(/stop/);
    });
    数组和类数组

    你可以通过 toContain 来检查一个数组或可迭代对象是否包含某个特定项:

    const shoppingList = [
      'diapers',
      'kleenex',
      'trash bags',
      'paper towels',
      'milk',
    ];
    
    test('the shopping list has milk on it', () => {
      expect(shoppingList).toContain('milk');
      expect(new Set(shoppingList)).toContain('milk');
    });
    异常

    还可以用来检查一个函数是否抛出异常:

    function compileAndroidCode() {
      throw new Error('you are using the wrong JDK');
    }
    
    test('compiling android goes as expected', () => {
      expect(() => compileAndroidCode()).toThrow();
      expect(() => compileAndroidCode()).toThrow(Error);
    
      // You can also use the exact error message or a regexp
      expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');
      expect(() => compileAndroidCode()).toThrow(/JDK/);
    });

    更多使用方法参考API文档.

    只执行当前test

    可使用 only() 方法表示只执行这个test,减少不必要的重复测试:

    test.only('it is raining', () => {
      expect(inchesOfRain()).toBeGreaterThan(0);
    });
    
    test('it is not snowing', () => {
      expect(inchesOfSnow()).toBe(0);
    });

    测试异步代码

    回调函数

    例如,假设您有一个 fetchData(callback) 函数,获取一些数据并在完成时调用 callback(data)。 你期望返回的数据是一个字符串 'peanut butter':

    test('the data is peanut butter', done => {
      function callback(data) {
        try {
          expect(data).toBe('peanut butter');
          done();
        } catch (error) {
          done(error);
        }
      }
    
      fetchData(callback);
    });

    使用 done() 是为了标识这个 test 执行完毕,如果没有这个 done(),在 test 执行完毕后,我们的单元测试就结束了,这不符合我们的预期,因为callback还未调用,单元测试还没走完。若 done() 函数从未被调用,将会提示超时错误。

    若 expect 执行失败,它会抛出一个错误,后面的 done() 不再执行。 若我们想知道测试用例为何失败,我们必须将 expect 放入 try 中,将 error 传递给 catch 中的 done 函数。 否则,最后控制台将显示一个超时错误失败,不能显示我们在 expect(data) 中接收的值。

    Promises

    还是使用上面的例子:

    test('the data is peanut butter', () => {
      return fetchData().then(data => {
        expect(data).toBe('peanut butter');
      });
    });

    一定不要忘记 return 结果,这样才能确保测试和功能同时结束。
    如果是期望 Promise 被 reject, 则使用 catch 方法:

    test('the fetch fails with an error', () => {
      expect.assertions(1);
      return fetchData().catch(e => expect(e).toMatch('error'));
    });

    还可以使用 resolves 和 rejects 匹配器:

    test('the data is peanut butter', () => {
      return expect(fetchData()).resolves.toBe('peanut butter');
    });
    
    test('the fetch fails with an error', () => {
      return expect(fetchData()).rejects.toMatch('error');
    });
    Async/Await
    test('the data is peanut butter', async () => {
      const data = await fetchData();
      expect(data).toBe('peanut butter');
    });
    
    test('the fetch fails with an error', async () => {
      expect.assertions(1);
      try {
        await fetchData();
      } catch (e) {
        expect(e).toMatch('error');
      }
    });

    async/await 还可以和 resolves()/rejects() 结合使用:

    test('the data is peanut butter', async () => {
      await expect(fetchData()).resolves.toBe('peanut butter');
    });
    
    test('the fetch fails with an error', async () => {
      await expect(fetchData()).rejects.toMatch('error');
    });

    安装和拆卸

    测试前和测试后

    在某些情况下,我们开始测试前需要做一些准备工作,然后在测试完成后,要做一些清理工作,可以使用 beforeEach 和 afterEach。
    例如,我们在每个test前需要初始化一些城市数据,test结束后要清理掉:

    beforeEach(() => {
      initializeCityDatabase();
    });
    
    afterEach(() => {
      clearCityDatabase();
    });
    
    test('city database has Vienna', () => {
      expect(isCity('Vienna')).toBeTruthy();
    });
    
    test('city database has San Juan', () => {
      expect(isCity('San Juan')).toBeTruthy();
    });

    类似的还有 beforeAll 和 afterAll,在当前spec测试文件开始前和结束后的单次执行。

    测试用例分组

    默认情况下,before 和 after 的块可以应用到文件中的每个测试。 此外可以通过 describe 块来将测试分组。 当 before 和 after 的块在 describe 块内部时,则其只适用于该 describe 块内的测试。

    // Applies to all tests in this file
    beforeEach(() => {
      return initializeCityDatabase();
    });
    
    test('city database has Vienna', () => {
      expect(isCity('Vienna')).toBeTruthy();
    });
    
    test('city database has San Juan', () => {
      expect(isCity('San Juan')).toBeTruthy();
    });
    
    describe('matching cities to foods', () => {
      // Applies only to tests in this describe block
      beforeEach(() => {
        return initializeFoodDatabase();
      });
    
      test('Vienna <3 sausage', () => {
        expect(isValidCityFoodPair('Vienna', 'Wiener Würstchen')).toBe(true);
      });
    
      test('San Juan <3 plantains', () => {
        expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
      });
    });
    执行顺序

    由于使用了 describe 进行分组,于是就有了嵌套的作用域,各生命周期的执行顺序如下:

    • 外层作用域的 before 比内层的先执行,而 after 则相反;

    • 同一层级 beforeAll 比 beforeEach 先执行,after 则相反;

    beforeAll(() => console.log('1 - beforeAll'));
    afterAll(() => console.log('1 - afterAll'));
    beforeEach(() => console.log('1 - beforeEach'));
    afterEach(() => console.log('1 - afterEach'));
    test('', () => console.log('1 - test'));
    describe('Scoped / Nested block', () => {
      beforeAll(() => console.log('2 - beforeAll'));
      afterAll(() => console.log('2 - afterAll'));
      beforeEach(() => console.log('2 - beforeEach'));
      afterEach(() => console.log('2 - afterEach'));
      test('', () => console.log('2 - test'));
    });
    
    // 1 - beforeAll
    // 1 - beforeEach
    // 1 - test
    // 1 - afterEach
    // 2 - beforeAll
    // 1 - beforeEach
    // 2 - beforeEach
    // 2 - test
    // 2 - afterEach
    // 1 - afterEach
    // 2 - afterAll
    // 1 - afterAll

    mock 函数

    jest.fn() 可以用来生成一个 mock 函数,jest 可以捕获这个函数的调用、this、返回值等,这在测试回调函数时非常有用。

    测试mock

    假设我们要测试函数 forEach 的内部实现,这个函数为传入的数组中的每个元素调用一次回调函数。

    function forEach(items, callback) {
      for (let index = 0; index < items.length; index++) {
        callback(items[index]);
      }
    }

    为了测试此函数,我们可以使用一个 mock 函数,然后检查 mock 函数的状态来确保回调函数如期调用。

    const mockCallback = jest.fn(x => 42 + x);
    forEach([0, 1], mockCallback);
    
    // 此 mock 函数被调用了两次
    expect(mockCallback.mock.calls.length).toBe(2);
    
    // 第一次调用函数时的第一个参数是 0
    expect(mockCallback.mock.calls[0][0]).toBe(0);
    
    // 第二次调用函数时的第一个参数是 1
    expect(mockCallback.mock.calls[1][0]).toBe(1);
    
    // 第一次函数调用的返回值是 42
    expect(mockCallback.mock.results[0].value).toBe(42);
    mock的返回值

    Mock 函数也可以用于在测试期间将测试值注入代码︰

    const myMock = jest.fn();
    console.log(myMock());
    // > undefined
    
    myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);
    
    console.log(myMock(), myMock(), myMock(), myMock());
    // > 10, 'x', true, true
    模拟接口返回

    假定有个从 API 获取用户的类。 该类用 axios 调用 API 然后返回 data,其中包含所有用户的属性:

    // users.js
    import axios from 'axios';
    
    class Users {
      static all() {
        return axios.get('/users.json').then(resp => resp.data);
      }
    }
    
    export default Users;

    现在,为测试该方法而不实际调用 API (使测试缓慢与脆弱),我们可以用 jest.mock(...) 函数自动模拟 axios 模块。一旦模拟模块,我们可为 .get 提供一个 mockResolvedValue ,它会返回假数据用于测试。

    // users.test.js
    import axios from 'axios';
    import Users from './users';
    
    jest.mock('axios');
    
    test('should fetch users', () => {
      const users = [{name: 'Bob'}];
      const resp = {data: users};
      axios.get.mockResolvedValue(resp);
    
      // or you could use the following depending on your use case:
      // axios.get.mockImplementation(() => Promise.resolve(resp))
    
      return Users.all().then(data => expect(data).toEqual(users));
    });
    mock函数的匹配器

    有了mock功能,就可以给函数增加一些自定义匹配器:

    // The mock function was called at least once
    expect(mockFunc).toHaveBeenCalled();
    
    // The mock function was called at least once with the specified args
    expect(mockFunc).toHaveBeenCalledWith(arg1, arg2);
    
    // The last call to the mock function was called with the specified args
    expect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);
    
    // All calls and the name of the mock is written as a snapshot
    expect(mockFunc).toMatchSnapshot();
    
    也可以自己通过原生的匹配器模拟,下方的代码与上方的等价:
    // The mock function was called at least once
    expect(mockFunc.mock.calls.length).toBeGreaterThan(0);
    
    // The mock function was called at least once with the specified args
    expect(mockFunc.mock.calls).toContainEqual([arg1, arg2]);
    
    // The last call to the mock function was called with the specified args
    expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
      arg1,
      arg2,
    ]);
    
    // The first arg of the last call to the mock function was `42`
    // (note that there is no sugar helper for this specific of an assertion)
    expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);
    
    // A snapshot will check that a mock was invoked the same number of times,
    // in the same order, with the same arguments.
    expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
    expect(mockFunc.getMockName()).toBe('a mock name');

    五、Vue Test Utils

    官网是这样介绍 Vue Test Utils 的:

    Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

    以下的例子均基于 vue-cli 脚手架,包括 webpack/babel/vue-loader

    测试单文件组件

    Vue 的单文件组件在它们运行于 Node 或浏览器之前是需要预编译的。我们推荐两种方式完成编译:通过一个 Jest 预编译器,或直接使用 webpack。这里我们选用 Jest 的方式。

    yarn add -D jest @vue/test-utils vue-jest

    vue-jest 目前并不支持 vue-loader 所有的功能,比如自定义块和样式加载。额外的,诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性,你需要用 Mocha 取代 Jest 来运行你的测试,同时用 webpack 来编译你的组件。

    处理 webpack 别名

    vue-cli 中默认使用 @ 作为 /src 的别名,在 Jest 也需要单独配置:

    // jest.config.js
    
    module.exports = {
        moduleNameMapper: {
            '^@/(.*)$': '<rootDir>/src/$1'
        }
    }

    挂载组件

    被挂载的组件会返回到一个包裹器内,而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。

    // test.js
    
    // 从测试实用工具集中导入 `mount()` 方法
    // 同时导入你要测试的组件
    import { mount } from '@vue/test-utils'
    import Counter from './counter'
    
    // 现在挂载组件,你便得到了这个包裹器
    const wrapper = mount(Counter)
    
    // 你可以通过 `wrapper.vm` 访问实际的 Vue 实例
    const vm = wrapper.vm
    
    // 在控制台将其记录下来即可深度审阅包裹器
    // 我们对 Vue Test Utils 的探索也由此开始
    console.log(wrapper)

    在挂载的同时,可以设置组件的各种属性:

    const wrapper = mount(Counter, {
        localVue,
        data() {
            return {
                bar: 'my-override'
            }
        },
        propsData: {
            msg: 'abc'
        },
        parentComponent: Foo, // 指定父组件
        provide: {
            foo() {
                return 'fooValue'
            }
        }
    })

    测试组件渲染出来的 HTML

    通过包裹器wrapper的相关方法,判断组件渲染出来的HTML是否符合预期。

    import { mount } from '@vue/test-utils'
    import Counter from './counter'
    
    describe('Counter', () => {
      // 现在挂载组件,你便得到了这个包裹器
      const wrapper = mount(Counter)
    
      test('renders the correct markup', () => {
        expect(wrapper.html()).toContain('<span class="count">0</span>')
      })
    
      // 也便于检查已存在的元素
      test('has a button', () => {
        expect(wrapper.contains('button')).toBe(true)
      })
    })

    模拟用户操作

    当用户点击按钮的时候,我们的计数器应该递增。为了模拟这一行为,我们首先需要通过 wrapper.find() 定位该按钮,此方法返回一个该按钮元素的包裹器。然后我们能够通过对该按钮包裹器调用 .trigger() 来模拟点击。

    it('button click should increment the count', () => {
      expect(wrapper.vm.count).toBe(0)
      const button = wrapper.find('button')
      button.trigger('click')
      expect(wrapper.vm.count).toBe(1)
    })

    为了测试计数器中的文本是否已经更新,我们需要了解 nextTick。任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数。

    it('button click should increment the count text', async () => {
      expect(wrapper.text()).toContain('0')
      const button = wrapper.find('button')
      await button.trigger('click')
      expect(wrapper.text()).toContain('1')
    })

    组件的事件

    每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录。

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

    然后你可以基于这些数据来设置断言:

    // 断言事件已经被触发
    expect(wrapper.emitted().foo).toBeTruthy()
    
    // 断言事件的数量
    expect(wrapper.emitted().foo.length).toBe(2)
    
    // 断言事件的有效数据
    expect(wrapper.emitted().foo[1]).toEqual([123])

    还可以触发子组件的事件:

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

    组件的data

    可以使用 setData() 或 setProps 设置组件的状态数据:

    it('manipulates state', async () => {
      await wrapper.setData({ count: 10 })
    
      await wrapper.setProps({ foo: 'bar' })
    })

    模拟vue实例方法

    由于Vue Test Utils 的 setMethods() 即将废弃,推荐使用 jest.spyOn() 方法来模拟Vue实例方法:

    import MyComponent from '@/components/MyComponent.vue'
    
    describe('MyComponent', () => {
      it('click does something', async () => {
        const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')
        await shallowMount(MyComponent).find('button').trigger('click')
        expect(mockMethod).toHaveBeenCalled()
      })
    })

    全局插件

    如果你需要安装所有 test 都使用的全局插件,可以使用 setupFiles,先在 jest.config.js 中指定 setup 文件:

    // jest.config.js
    module.exports = {
        setupFiles: ['<rootDir>/tests/unit/setup.js']
    }

    然后在 setup.js 使用:

    // setup.js
    import Vue from 'vue'
    
    // 以下全局注册的插件在jest中不生效,必须使用localVue
    import ElementUI from 'element-ui'
    import VueClipboard from 'vue-clipboard2'
    
    Vue.use(ElementUI)
    Vue.use(VueClipboard)
    
    Vue.config.productionTip = false

    当你只是想在某些 test 中安装全局插件时,可以使用 localVue,这会创建一个临时的Vue实例:

    import { createLocalVue, mount } from '@vue/test-utils'
    
    // 创建一个扩展的 `Vue` 构造函数
    const localVue = createLocalVue()
    
    // 正常安装插件
    localVue.use(MyPlugin)
    
    // 在挂载选项中传入 `localVue`
    mount(Component, {
      localVue
    })

    测试watch

    假如我们有一个这样的watcher:

    watch: {
      inputValue(newVal, oldVal) {
        if (newVal.trim().length && newVal !== oldVal) {
          console.log(newVal)
        }
      }
    }

    由于watch的调用是异步的,并且在下一个tick才会调用,因此可以通过检测watcher里的方法是否被调用来检测watch是否生效,使用 jest.spyOn() 方法:

    describe('Form.test.js', () => {
      let cmp
      ...
    
      describe('Watchers - inputValue', () => {
        let spy
    
        beforeAll(() => {
          spy = jest.spyOn(console, 'log')
        })
    
        afterEach(() => {
          spy.mockClear()
        })
    
        it('is not called if value is empty (trimmed)', () => {
        })
    
        it('is not called if values are the same', () => {
        })
    
        it('is called with the new value in other cases', () => {
        })
      })
    })
    
    it("is called with the new value in other cases", done => {
      cmp.vm.inputValue = "foo";
      cmp.vm.$nextTick(() => {
        expect(spy).toBeCalled();
        done();
      });
    });

    第三方插件

    当我们使用一些第三方插件的时候,一般不需要关心其内部的实现,不需要测试其组件,可以使用 shallowMount 代替 mount, 减少不必要的渲染:

    import { shallowMount } from '@vue/test-utils'
    
    const wrapper = shallowMount(Component)
    wrapper.vm // 挂载的 Vue 实例
    
    还可以通过 findAllComponents 来查找第三方组件:
    import { Select } from 'element-ui'
    test('选中总部时不显示分部和网点', async () => {
        await wrapper.setProps({
            value: {
                clusterType: 'head-quarter-sit',
                branch: '',
                site: ''
            }
        })
        // 总部不显示分部和网点
        expect(wrapper.findAllComponents(Select)).toHaveLength(1)
    })

    六、总结

    单元测试理论

    • 单元测试能够持续验证代码的正确性、驱动开发,并起到一定的文档作用;

    • 测试时数据尽量模拟现实,只考虑测试,不考虑内部代码;

    • 测试时充分考虑数据的边界条件

    • 对重点、复杂、核心代码,重点测试

    • 编写单元测试有以下阶段:准备阶段、执行阶段、断言阶段、清理阶段;

    • 单元测试的工具可分为三类:测试运行器(Test Runner)、测试框架、工具库。

    Jest

    • --watch 选项可以监听文件的编码,自动执行单元测试;

    • 测试异步代码可以用 done 方法或 aync 函数;

    • mock函数可以捕获这个函数的调用、this、返回值等,测试回调函数时非常有用。

    Vue Test Utils

    • 用 mount 方法挂载组件,并可自定义各种vue属性;

    • shallowMount 方法不渲染子组件,从而加快测试速度;

    • setupFiles 可以设置全局环境,如安装 element-ui;

    • createLocalVue 可在创建单独的vue实例,与全局的隔离;

    “前端Vue单元测试知识点有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI