introduce

Vitest is a test case framework supported by Vite. In a Vite project, you can start the Vite service to run test cases at high speed by simply adding test-related configuration to the vite.config.js file and then running the Vitest directive. Vitest has a high degree of TS support without configuration and supports hot update of test cases while keeping Jest written, making migration easy and eliminating the need for multiple configuration steps. The documentation states that Vitest provides the following features:

  • Jest Snapshot
  • Built-in Chai assertion, compatible with Jest API
  • Hot updates of test cases
  • Output test case coverage through C8
  • Mock, stub, spy support from Tinyspy
  • JSDOM and Happy-dom environments for DOM and browser API emulation
  • Component testing (Vue, React, Lit, Vitesse)
  • Multithreading through Tinypool, a lightweight offshoot of Piscina
  • The ESM is preferred
  • TS/JSX support
  • Filtering, timeouts, and concurrency for suites and tests

For details, see: Build a Vue 3 + Vite project with Origon. js CLI.

The installation

Install vitest:

npm install -D vitest
Copy the code

Output test coverage is required in this project, so install C8:

npm install -D c8
Copy the code

This project designs Vue component tests, so install @vue/test-utils:

npm install -D @vue/test-utils
Copy the code

Test configuration

Refer to the Jest configuration to convert it to the Vitest configuration.

The original jest.config.js configuration:

module.exports = {
  // ...
  collectCoverage: true.collectCoverageFrom: ['<rootDir>/src/components/**/*.vue'].testEnvironment: 'jsdom',}Copy the code

Ts and module reading are also configured in the Jest configuration file, which is supported by default in Vitest, so you don’t need to configure them again.

The runtime environment is jsdom, and the configuration is in viet.config. ts:

export default defineConfig({
  // ...
  test: {
    environment: 'jsdom'.global: true}})Copy the code

Vitest requires import when using Jest apis such as Test, Describe, it, etc. Setting global: true allows you to use it in files without import.

Test case coverage is also involved in the Jest configuration, so add the –coverage parameter to run the Vitest directive.

// package.json
"scripts": {
  // ...
  "test": "vitest --coverage"
}
Copy the code

Vue component test migration

Test cases are consistent with Jest:

import { mount } from '@vue/test-utils'
import Sources from '@/components/Sources.vue'

const sourceOpitons = [
  {
    title: 'github'.link: 'https://github.com/originjs/origin.js'}, {title: 'docs'.link: 'https://originjs.github.io/docs/',
  },
]

describe('Sources'.() = > {
  test('Sources link'.() = > {
    const wrapper = mount(Sources, {
      props: {
        list: sourceOpitons,
      },
    })

    expect(wrapper.find('[title = "github"]').attributes('href')).toBe(
      sourceOpitons[0].link,
    )
    expect(wrapper.find('[title = "docs"]').attributes('href')).toBe(
      sourceOpitons[1].link,
    )
  })
})
Copy the code

Update vite/ VUE-Plugin to the latest version.

Unit test case migration

Create the vitest.config.ts file and repeat the preceding steps. The original Jest test used mocks to modules, which reported errors when migrated to Vitest, and other test cases reported the introduction of third-party mode-related errors. Not resolved yet, abandoned migration, see Issue #119.

At present, Vitest is in the initial stage, and various functions are unstable. Migration is not recommended except for Vite project. (There are reasons in the document)

More and more

  • Vitest official documentation
  • Vitest configuration items
  • Vitest feature added to Origine.js