Vue+TypeScript单元测试

寂月

已于 2024-02-07 17:12:09 修改

阅读量270

点赞数 3

分类专栏：前端文章标签：单元测试前端 vue.js typescript

于 2024-02-07 17:09:50 首次发布

本文链接：https://blog.csdn.net/u013109718/article/details/136066586

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue+TypeScript项目中配置Vitest进行单元测试，包括兼容Webpack5的配置，并提到了使用Bito自动生成测试用例的方法，以及尝试使用AI如ChatGPT但受限于Vitest版本的问题。

摘要由CSDN通过智能技术生成

Vue+TypeScript单元测试

Vue官方推荐使用Vitest进行单元测试，所以这里也首先尝试使用Vitest来进行单元测试

1、配置Vitest

这里推荐查看官网的文档，写的非常的细致
官网地址
官网要求Vitest 1.0版本需要 Vite >=v5.0.0 和 Node >=v18.00。但是其实不需要使用Vite的构建也可以使用Vitest，我这里使用的是Taro的框架，用的是webpack 5来进行构建的，尝试之后，也能够跑单元测试。但是如果需要使用alias等配置单独在vitest.config.ts中配置

import { join } from "path";
import { defineConfig } from 'vite'

export default defineConfig({
    resolve: {
        alias: {
            '@': join(__dirname, "src"),
        }
    }
})

2、寻找AI生成单元测试

4202年了不会有人还手写单元测试吧
我尝试使用了Bito自动根据代码生成Vitest代码，测试了一些简单的逻辑方法，能够正常的生成单元测试。

// 测试用例
describe('calcNumberTransform', () => {
    it('should convert numbers to Chinese number', () => {
        // 测试用例 1
        const isTransform = true;
        const val = 1234;

        // 断言
        expect(calcNumberTransform(isTransform, val)).toBe("壹仟贰佰叁拾肆元整");
    });

    it('should handle empty or undefined values', () => {
        // 测试用例 2
        const isTransform = true;
        const val = undefined;

        // 断言
        expect(calcNumberTransform(isTransform, val)).toBe('');
    });
});

就前端的简单代码逻辑来说，感觉已经够用了。我也尝试使用免费的ChatGPT3.5生成单元测试，但是由于Vitest太新了，ChatGPT3.5的资源还是2020年的，没有办法生成Vitest的单元测试，仅能生成Jest的单元测试代码。
感觉对于前端来说 Bito一天20条应该也还好吧，基本上不会有太多的逻辑处理代码。如果有更好的代码辅助AI，希望大家分享给我！不是XXX，而是免费更有性价比！