单元测试

npm install --save-dev jest

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

// jest.config.js
export default {
  verbose: true,
  roots: ['<rootDir>/src'],
  testMatch: [
    '/__tests__/**/*.[jt]s?(x)',
    '**/?(*.)+(spec|test).[jt]s?(x)'
  ],
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  // 转译设置 ，需要安装包依赖
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  // extensionsToTreatAsEsm: [ '.mjs'],
  testPathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
    '/build/',
    '/.next/'
  ],
  // 处理 TypeScript (如果需要)
  preset: 'ts-jest/presets/default-esm',
  globals: {
    'ts-jest': {
      useESM: true,
      tsconfig: 'tsconfig.esm.json'
    }
  }
  // 覆盖率
  collectCoverage: true,
  coverageDirectory: '__tests__/coverage',
  // 别名映射
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^pages/(.*)$': '<rootDir>/src/pages/$1',
    '^router/(.*)$': '<rootDir>/src/router/$1',
    '^widget/(.*)$': '<rootDir>/src/widget/$1',
    '^utils/(.*)$': '<rootDir>/src/utils/$1',
    '^~assets/(.*)$': '<rootDir>/src/assets/$1',
    '^config/(.*)$': '<rootDir>/src/config/$1',
    '^store/(.*)$': '<rootDir>/src/store/$1',
  }
};

// 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 veal', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

// 执行周期
describe('describe outer', () => {
  console.log('describe outer-a');

  describe('describe inner 1', () => {
    console.log('describe inner 1');

    test('test 1', () => console.log('test 1'));
  });

  console.log('describe outer-b');

  test('test 2', () => console.log('test 2'));

  describe('describe inner 2', () => {
    console.log('describe inner 2');

    test('test 3', () => console.log('test 3'));
  });

  console.log('describe outer-c');
});

// describe outer-a
// describe inner 1
// describe outer-b
// describe inner 2
// describe outer-c
// test 1
// test 2
// test 3

import renderer from 'react-test-renderer';
import Link from '../Link';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

// __mocks__/userApi.js
export const getUser = jest.fn(() => Promise.resolve({
  id: 1,
  name: 'Mock User'
}));

import { getUser } from '../api/userApi';
jest.mock('../api/userApi'); // 这会自动使用 __mocks__ 下的实现

test('should return mock user', async () => {
  const user = await getUser();
  expect(user.name).toBe('Mock User');
});

const mockFn = jest.fn();
mockFn.mockReturnValue(42);

test('mock function', () => {
  expect(mockFn()).toBe(42);
});


jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mock data' }))
}));

import axios from 'axios';

test('mock axios', async () => {
  const response = await axios.get('/api');
  expect(response.data).toBe('mock data');
});

const mockFn = jest.fn();

// 设置返回值
mockFn.mockReturnValue('default')
     .mockReturnValueOnce('first call')
     .mockReturnValueOnce('second call');

// 设置实现
mockFn.mockImplementation(() => 'complex implementation');

// 设置 Promise 返回值
mockFn.mockResolvedValue('async value');

jest.mock('../module', () => {
  const originalModule = jest.requireActual('../module');
  
  return {
    ...originalModule,
    functionToMock: jest.fn()
  };
});

// api.js
export const fetchData = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

// api.test.js
import { fetchData } from './api';

beforeAll(() => {
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ data: 'mock data' })
    })
  );
});

afterAll(() => {
  global.fetch.mockRestore();
});

test('fetchData returns mock data', async () => {
  const data = await fetchData();
  expect(data).toEqual({ data: 'mock data' });
  expect(global.fetch).toHaveBeenCalledWith('/api/data');
});

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 (error) {
    expect(error).toMatch('error');
  }
});

// 描述测试套件
describe('模块/组件名称', () => {
  // 测试前的准备工作
  beforeAll(() => {
    // 在所有测试之前执行一次
  });
  
  beforeEach(() => {
    // 在每个测试之前执行
  });
  
  // 单个测试用例
  test('应该...', () => {
    // 测试断言
    expect(...).toBe(...);
  });
  
  // 也可以用 it() 别名
  it('应该...', () => {
    // 测试断言
  });
  
  // 测试后的清理工作
  afterEach(() => {
    // 在每个测试之后执行
  });
  
  afterAll(() => {
    // 在所有测试之后执行一次
  });
});

import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button 组件', () => {
  test('渲染正确的内容', () => {
    render(<Button>点击我</Button>);
    expect(screen.getByText('点击我')).toBeInTheDocument();
  });
  
  test('点击事件触发', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>点击</Button>);
    
    fireEvent.click(screen.getByText('点击'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

npm install --save-dev vitest

// vite.config.js  若是使用了 vite ，用 /// <reference types="vitest" /> 引入vitest
// 若是没有使用 vite ，则直接在 package.json 中配置即可，或者新增 vitest.config.js 文件
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,// 启用全局API 
    // jsdom-浏览器环境模拟 安装 jsdom 包 ，happy-dom-被认为比 jsdom 更快 安装 happy-dom 包 
    // edge-runtime 模拟 Vercel 的 edge-runtime，使用 @edge-runtime/vm 包
    // 默认 node
    environment: 'happy-dom', 
    transformMode: {
      web: [/\.vue$/],
    },
    // 可选：指定测试文件的路径
    include:['test/**/*.test.js','test/**/*.spec.ts'],
    // 可选：指定测试文件的初始化文件
    exclude:['node_modules','dist','**/*.css',"src/**/*.vue","src/**/*.js","src/**/*.ts"],
    css: {
      modules: {
        classNameStrategy: 'non-scoped',
      },
    },
    // 可选：强制内联某些依赖 比如排除element-plus 不内联，避免出现 Unknown file extension “.css”
    deps: {
      inline: ['element-plus'],
    }
  },
})

// package.json
{
  "scripts": {
    "test": "vitest"
    // 或者
    "test": "vitest --config=vitest.config.js"
  }
}

确保安装了 Vitest 的类型定义：
npm install --save-dev @types/node @vitest/globals

// 在 compilerOptions.types 中添加 vitest/globals：
// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src", "test"],
  "exclude": ["node_modules"] 
}

import { describe, it, expect, beforeEach, afterEach } from 'vitest'

describe('MyComponent', () => {
  let wrapper

  beforeEach(() => {
    wrapper = mount(MyComponent)
  })

  afterEach(() => {
    wrapper.unmount()
  })

  it('renders correctly', () => {
    expect(wrapper.text()).toContain('Hello World')
  })
})

// 1. vi.fn() 函数：
import { vi } from 'vitest';

const mockFn = vi.fn((a, b) => a + b);

test('mock function', () => {
  expect(mockFn(1, 2)).toBe(3); // 调用 mockFn
  expect(mockFn).toHaveBeenCalled(); // 检查是否被调用
  expect(mockFn).toHaveBeenCalledWith(1, 2); // 检查调用参数
});

// 模拟返回值
const mockFn = vi.fn()
  .mockReturnValue(42) // 默认返回值
  .mockReturnValueOnce(10); // 第一次调用返回 10

test('mock return values', () => {
  expect(mockFn()).toBe(10); // 第一次返回 10
  expect(mockFn()).toBe(42); // 之后返回 42
});

// 2.Mock 模块
// fetchData.ts
export const fetchData = async () => {
  const res = await fetch('/api/data');
  return res.json();
};

import { fetchData } from './fetchData';
import { vi } from 'vitest';

// 模拟整个模块
vi.mock('./fetchData', () => ({
  fetchData: vi.fn().mockResolvedValue({ data: 'mocked data' }),
}));

test('fetchData returns mocked data', async () => {
  const data = await fetchData();
  expect(data).toEqual({ data: 'mocked data' });
});


import { fetchData, originalFunction } from './fetchData';

vi.mock('./fetchData', async (importOriginal) => {
  const mod = await importOriginal(); // 获取原始模块
  return {
    ...mod, // 保留其他函数
    fetchData: vi.fn().mockResolvedValue('mocked data'), // 只模拟 fetchData
  };
});

test('partial mock', async () => {
  expect(await fetchData()).toBe('mocked data'); // 模拟的
  expect(originalFunction()).toBe('real implementation'); // 原始的
});


// 3. Mock 类
// UserService.ts
export class UserService {
  getUser(id: number) {
    return fetch(`/api/users/${id}`).then(res => res.json());
  }
}

import { UserService } from './UserService';
import { vi } from 'vitest';

const mockGetUser = vi.fn().mockResolvedValue({ id: 1, name: 'Mocked User' });

vi.mock('./UserService', () => ({
  UserService: vi.fn(() => ({
    getUser: mockGetUser,
  })),
}));

test('mock class method', async () => {
  const userService = new UserService();
  const user = await userService.getUser(1);
  expect(user).toEqual({ id: 1, name: 'Mocked User' });
  expect(mockGetUser).toHaveBeenCalledWith(1);
});


// 4. Mock 第三方库
import axios from 'axios';
import { vi } from 'vitest';

vi.mock('axios');

test('mock axios', async () => {
  const mockedAxios = axios as jest.Mocked<typeof axios>;
  mockedAxios.get.mockResolvedValue({ data: { id: 1 } });

  const res = await axios.get('/api/user');
  expect(res.data).toEqual({ id: 1 });
});


// 5. Mock 全局对象
import { vi } from 'vitest';

const mockLocation = {
  href: 'https://example.com',
  reload: vi.fn(),
};
vi.stubGlobal('location', mockLocation);

test('mock window.location', () => {
  location.reload();
  expect(location.href).toBe('https://example.com');
  expect(location.reload).toHaveBeenCalled();
});


// 6. 重置 Mock
afterEach(() => {
  vi.clearAllMocks(); // 清除调用记录
  vi.restoreAllMocks(); // 恢复原始实现
});

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent)
    // 断言测试结果
    expect(wrapper.text()).toContain('Hello World')
  })
}

// the implementation
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0)
}

// 源码内的测试套件
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest
  it('add', () => {
    expect(add()).toBe(0)
    expect(add(1)).toBe(1)
    expect(add(1, 2, 3)).toBe(6)
  })
}

// 更新 Vitest 配置文件内的 includeSource 以获取到 src/ 下的文件： [文档](https://cn.vitest.dev/guide/in-source.html)
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'], 
  },
})

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent)
    // 断言测试结果
    expect(wrapper.html()).toMatchSnapshot()
  })  
})

// 运行文件后会在当前测试文件的同级目录下生成 __snapshots__ 目录，里面存放着快照文件，快照文件的名称为测试用例的名称加上 .snap 后缀。
// 可以通过在命令行中运行 vitest --updateSnapshot 来更新快照文件。

// 运行文件后会在当前测试文件的同级目录下生成 __coverage__ 目录，里面存放着覆盖率报告。
// 可以通过在命令行中运行 vitest --coverage 来生成覆盖率报告。