前端Vue单元测试入门教程

目录
  • 一、为什么需要单元测试
  • 二、如何写单元测试
  • 三、测试工具
  • 四、Jest入门
    • 安装
    • 简单示例
    • Jest Cli
    • 使用配置文件
    • 使用 Babel
    • vue-cli 中使用 Jest
    • 常见示例
      • 判断值相等
      • 检查类false值
      • 数字大小比较
      • 字符串比较
      • 数组和类数组
      • 异常
      • 只执行当前test
    • 测试异步代码
      • 回调函数
      • Promises
      • Async/Await
    • 安装和拆卸
      • 测试前和测试后
      • 测试用例分组
      • 执行顺序
    • mock 函数
      • 测试mock
      • mock的返回值
      • 模拟接口返回
      • mock函数的匹配器
  • 五、Vue Test Utils
    • 测试单文件组件
    • 处理 webpack 别名
    • 挂载组件
  • 测试组件渲染出来的 HTML
  • 模拟用户操作
    • 组件的事件
    • 组件的data
    • 模拟vue实例方法
    • 全局插件
    • 测试watch
    • 第三方插件
  • 六、总结

一、为什么需要单元测试

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

  • 正确性:可以验证代码的正确性,为上线前做更详细的准备;
  • 自动化:测试用例可以整合到代码版本管理中,自动执行单元测试,避免每次手工操作;
  • 解释性:能够为其他开发人员提供被测模块的文档参考,阅读测试用例可能比文档更完善;
  • 驱动开发、指导设计:提前写好的单元测试能够指导开发的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单元测试入门教程的文章就介绍到这了,更多相关Vue单元测试内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 教你如何编写Vue.js的单元测试的方法

    Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架.特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期.然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦.因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行.在本文中,我们将为VueJS创建一些简单的单元测试. 要进行测试,我们将先制作一个基本的待办事项列表组件.我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中.希望在本

  • vue 单元测试的推荐插件和使用示例

    目录 框架 一流的错误报告 活跃的社区和团队 Jest Mocha 推荐插件 Vue Testing Library (@testing-library/vue) Vue Test Utils 示例 单元测试应该: 可以快速运行 易于理解 只测试一个独立单元的工作 框架 因为单元测试的建议通常是框架无关的,所以下面只是当你在评估应用的单元测试工具时需要的一些基本指引. 一流的错误报告 当测试失败时,提供有用的错误信息对于单元测试框架来说至关重要.这是断言库应尽的职责.一个具有高质量错误信息的断言

  • 详解使用jest对vue项目进行单元测试

    最近领导对前端提出了新的要求,要进行单元测试.之前使用vue做了一个快报名小程序的pc端页面,既然要做单元测试,就准备用这个项目了,之前有些react的经验,vue还是第一遭 vue-cli3.0单元测试方面更加完备,就先升级到了cli3.0,因为项目是用typescript写的,需要ts-jest,得到jest的配置如下 { "jest": { "moduleFileExtensions": [ "js", "jsx", &

  • 浅谈Vue组件单元测试究竟测试什么

    关于 Vue 组件单元测试最常见的问题就是"我究竟应该测试什么?" 虽然测试过多或过少都是可能的,但我的观察是,开发人员通常会测试过头.毕竟,没有人愿意自己的组件未经测试从而导致应用程序在生产中崩溃. 在本文中,我将分享一些用于组件单元测试的指导原则,这些指导原则可以确保在编写测试上不会花费大量时间,但是可以提供足够的覆盖率来避免错误. 本文假设你已经了解 Jest 和 Vue Test Utils. 示例组件 在学习这些指导原则之前,我们先来熟悉下要测试的示例组件.组件名为 Item

  • 如何为vue的项目添加单元测试

    动机 单元测试能避免出现一些代码运行结果与预期不符的错误,通常是一些比较低级但又难以发现的问题. 粗心且懒,在每次调整之后,需要不断地检查代码,反复去走流程.担心由于自己的改动而导致了逻辑上的错误.而这里面的一大部分工作其实可以让单元测试来完成. 有了单元测试之后,可以对代码本身形成一种规范.如果在进行单元测试过程中发现自己的一些代码不方便进行测试,那么你可能需要重新审视这些代码,看是否有一些设计上不合理或者可以优化的地方. 嵌入了单元测试的项目显得更加的专业,也会更有逼格,测试本身是开发环节需

  • vue 单元测试初探

    目录 前言 为什么要引进单元测试? 单元测试概述 测试开发的模式 1. 测试驱动开发(TDD - Test Driven Development) 2. 行为驱动开发(BDD - Behavior Driven Development) Vue中的单元测试 框架选择 Vue Test Utils 文档 前言 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

  • Docker容器部署前端Vue服务(小白教程)

    目录 需要工具 首先对前端项目进行打包:npm run build 在项目文件夹下编写nginx config配置文件 在项目文件夹下编写Dockerfile文件 构建docker镜像 启动docker容器 查看启动的容器 访问 需要工具 Xftp Xshell 首先对前端项目进行打包:npm run build 打包完成 在项目中生成dist文件: 通过Xshell在/home目录下创建项目文件夹 mkdir xxxx(文件名) 通过Xftp将打包的dist文件上传到服务器的项目文件夹下: 利

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • Vue.JS入门教程之列表渲染

    你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite

  • Vue.JS入门教程之处理表单

    本文实例为大家分享了Vue.JS表单处理的相关内容,供大家参考,具体内容如下 基本用法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.m

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • vue.js入门教程之计算属性

    前言 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 模板中表达式非常便利,但是它们实际上只用于简单的操作. 模板是为了描述视图的结构,在模板中放入太多的逻辑会让模板过重且难以维护. 这就是为什么 Vue.js 将绑定表达式限制为一个表达式, 如果需要多于一个表达式的逻辑,应当使用计算属性. 来看这一个简单的例子 <div i

  • vue.js入门教程之基础语法小结

    前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

  • Vue.JS入门教程之自定义指令

    基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一

  • vue小白入门教程

    一.vue是什么 Vue 是一套用于构建用户界面的 渐进式框架 . 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入, Vue 会被注册为一个全局变量. 但在用 Vue 构建大型应用时推荐使用 NPM 安装. 这里推荐一下是用淘宝的cnpm,非常的快 npm install -g cnpm --registry=https://registry.npm.taobao.org 然后进行安装 # 全局安装 vue-cli npm install --g vue-c

随机推荐