在vue3+ts项目中使用jest单元测试

1、 在创建项目的时候可以直接选择带有jest的一项然后可以直接在tests里面编写我们的ts文件
然后再npm run unit:test即可
2、 当我们在创建的时候没选择jest该怎么办呢
首先需要的项目依赖
npm i -S @vue/cli-plugin-unit-jest vue-jest @vue/test-utils

如果是ts项目,需要额外添加 ts-jest @types/jest 安装包

2在根目录新建jest.config.js 文件,配置如下
module.exports ={
preset:’@vue/cli-plugin-unit-jest/presets/typescript-and-babel’,
}

然后在tsconfig.json中的types选项中新增jest选项
“types”: [
“jest”
],
接下来在我们的package.json里添加 “test”: “jest”
下面上个案例吧!
首先我编写了一个改变我们数组的函数
在这里插入图片描述
然后在我们跟目录下创建test/unit文件夹
我编写了一个arr.test.ts
在这里插入图片描述
接下来使用npm run jest去测试它
在这里插入图片描述
这样我们就已经成功的在我们项目里使用jest了!

对于Vue 3和TypeScript项目实战,有以下几个步骤可以参考: 1. 创建一个新的Vue 3项目:可以使用Vue CLI来快速创建一个基本的Vue 3项目。通过命令行运行`vue create`命令,选择使用TypeScript作为项目的语言支持。 2. 配置Vue 3的TypeScript支持:在创建项目时,选择了TypeScript后,Vue CLI会自动生成一些基本的TypeScript配置。你可以在`tsconfig.json`文件进行进一步的配置,例如指定编译目标、模块加载器等。 3. 使用Vue 3的Composition API:Composition API是Vue 3引入的新特性,它允许开发者更灵活地组织和重用组件逻辑。你可以在组件使用`setup()`函数来定义组件的逻辑部分,并通过`ref()`、`reactive()`等函数来创建响应式数据。 4. 定义类型:在使用TypeScript开发Vue 3项目时,可以为组件、数据等定义类型。通过给变量、函数参数、返回值等添加类型注解,可以提供更好的代码提示和类型检查。 5. 使用Vue Router进行路由管理:如果你的项目需要使用路由管理,可以使用Vue Router。在Vue 3,可以使用`createRouter()`函数来创建路由实例,并通过`use()`方法将其挂载到应用。 6. 使用Vuex进行状态管理:如果你需要进行全局状态管理,可以使用Vuex。在Vue 3,可以使用`createStore()`函数来创建Vuex实例,并通过`provide()`和`inject()`配合使用,将其注入到应用的各个组件。 7. 编写单元测试:在实战项目,编写单元测试是一个重要的环节。你可以使用工具如Jest或Mocha等来编写和运行单元测试,以确保你的代码的质量和稳定性。 以上是一个基本的Vue 3和TypeScript项目实战的步骤,希望对你有所帮助!如果你有更具体的问题,欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值