How to do TDD with vitest

1. install

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

2. create a file in the root folder

#index.test.ts

import { expect, test } from 'vitest' 

test('hello vitest', () => { 
    expect(1).toBe(2) 
})

or

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

import testComponent from './test.vue'

describe('vitest test', () => {
  test('test the rendering', () => {
    expect(testComponent).toBeTruthy()
    const wrapper = mount(testComponent)
    expect(wrapper.text()).toContain('hello')
    expect(wrapper.element).toMatchSnapshot()
  })
})

3. change vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, './src'),
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

4. add jest.config.js

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

5. add new commands at package.json

{ 
    "scripts": { 
         "test": "vitest", 
         "test-coverage": "vitest run --coverage" 
    } 
}

6. use vscode

Because it is more convenient.

​