小白的Vitest入门教程

学习路径

jest官网

vitest官网

vitest的很多语法，api是兼容jest的，很方便熟悉jest的同学上手。（可是我jest也没用过😂）但是我看了下jest官网，发现讲得还是很浅显易懂的。看完再看配合vitest的api文档，感觉不是那么难了。

先迈出最重要的第一步

能使用jest测试一个文件。后面在用vitest的时候除了引入api的不同，其它都是一样的。

先下载jest包

npm install --save-dev jest

再在一个项目里随便哪个位置创建两个文件。sum.js和sum.test.js。也可以命令为sum.spec.js，jest都是会扫描到的。

其中sum.js。在这里不用CommonJS模块到导出，不知道为什么就会报错。

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

sum.test.js

const sum = require('./sum');
const {expect, test} = require('@jest/globals');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

最后在package.json中添加一个脚本并执行。

{  
    "scripts": {  
        "test": "jest"  
    }  
}

ok，这就完成啦。

匹配器

上面demo的expect(sum(1, 2)).toBe(3);的toBe(3)就是匹配器。通过调用expect（直译断言）可以拿到匹配器。

有很多匹配器，这里就不介绍了，需要的看看文档就是。jestjs.io/zh-Hans/doc…

测试异步代码

可以使用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');
  }
});

vitest测试vue组件

测试vue组件需要下载一个包，@vue/test-utils。模拟将vue组件渲染出来，然后就可以进行测试了。

官网：test-utils.vuejs.org/

下面举个例子，假设有一个button按钮组件，需要进行测试。

import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import { Button } from './button'

describe('测试button组件', () => {
  test('测试class类', () => {
    const wrapper = mount(FButton)
    expect(wrapper.classes()).toContain('button')
  })

  test('测试传入的bold prop', () => {
    const wrapper = mount(FButton, {
      props: { bold: true }
    })
    expect(wrapper.classes()).toContain('button__bold')
  })
})

mount方法返回的wrapper就是一个模拟对象。可以判断它的class类名是否包含button。当传入的bold prop为true时，判断组件渲染出来的类名是否包含button__bold

其它例子

import { describe, expect, test } from 'vitest'

describe('test collection', () => {
  test('toContain', () => {
    const arr1 =  ['1',2,'c']
    const arr2 =  'ABCD'
    // ok
    expect(arr1).toContain('1')
    // ok
    expect(arr2).toContain('AB')
  })

  test('toContainEqual', () => {
    const arr1 = [1, 2, 3, {a: 1,b:2}]

    // error
    // expect(arr1).toContainEqual({a:1})
    // ok
    expect(arr1).toContainEqual({a:1, b:2})

  })
})

最后感想

看到那些开源项目，都会介绍测试覆盖率多少多少。就想了解一下。虽然在平时开发中为了快可能不会使用。希望这篇文章能有点用吧，，我搜vitest入门教程都搜不到一篇的。。