vue3+vite+jest配置 单元测试总结

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// 配置Jest测试环境
process.env.VITE_TEST = 'true';
 
export default defineConfig({
  plugins: [vue()],
  test: {
    // 指定Jest的配置
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./tests/setup.js'],
  },
});
 
// tests/setup.js
import { render } from '@testing-library/vue';
import { describe, it, expect } from 'vitest';
 
// 示例组件
const MessageComponent = {
  template: '<div>{{ message }}</div>',
  props: ['message'],
};
 
// 测试用例
describe('MessageComponent', () => {
  it('should display the message', () => {
    const { getByText } = render(MessageComponent, {
      props: {
        message: 'Hello, Vue!',
      },
    });
 
    // 检查渲染结果是否包含预期的文本
    expect(getByText('Hello, Vue!')).toBeInTheDocument();
  });
});

这个代码实例展示了如何为Vue 3 + Vite项目配置Jest测试环境，并编写了一个简单的组件渲染测试用例。通过vite.config.js中的配置，我们设置了环境变量VITE_TEST，并指定了Jest的全局变量和测试环境。在setup.js中，我们使用@testing-library/vue渲染组件并进行断言，测试组件是否按预期渲染了传入的属性。