vue 如何使用jest进行增删改查,并且基本地址和token也在其他文件进行了封装,对于api的请求也进行了封装
时间: 2024-03-08 17:46:34 浏览: 116
vue.js+Element实现表格里的增删改查
首先,你需要安装 `@vue/cli-plugin-unit-jest` 插件,可以使用以下命令进行安装:
```
vue add unit-jest
```
然后,在你的测试文件中引入要测试的组件或方法,以及封装好的 api 请求和配置文件。例如:
```js
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
import { api } from '@/api'
import { config } from '@/config'
```
接下来,你可以编写增删改查的测试用例。例如:
```js
describe('MyComponent', () => {
it('should add a new item', async () => {
const wrapper = shallowMount(MyComponent)
const newItem = { name: 'New Item', description: 'This is a new item.' }
await wrapper.vm.addItem(newItem)
expect(wrapper.vm.items).toContainEqual(newItem)
})
it('should delete an item', async () => {
const wrapper = shallowMount(MyComponent)
const itemToDelete = wrapper.vm.items[0]
await wrapper.vm.deleteItem(itemToDelete.id)
expect(wrapper.vm.items).not.toContainEqual(itemToDelete)
})
it('should update an item', async () => {
const wrapper = shallowMount(MyComponent)
const itemToUpdate = wrapper.vm.items[0]
const updatedItem = { ...itemToUpdate, name: 'Updated Item' }
await wrapper.vm.updateItem(updatedItem)
expect(wrapper.vm.items).toContainEqual(updatedItem)
})
it('should fetch items from API', async () => {
api.setConfig(config)
const itemsFromApi = [{ id: 1, name: 'Item 1', description: 'This is item 1.' }]
api.get = jest.fn().mockResolvedValue(itemsFromApi)
const wrapper = shallowMount(MyComponent)
await wrapper.vm.fetchItems()
expect(wrapper.vm.items).toEqual(itemsFromApi)
})
})
```
在这个例子中,我们编写了四个测试用例,分别测试了增加、删除、更新和从 API 获取数据的功能。我们使用了 `shallowMount` 方法来创建一个组件实例,并且调用了组件实例中的相应方法来测试各种功能。我们还在测试用例中使用了 `api` 和 `config` 对象,这些对象在其他文件中进行了封装,可以通过 `import` 引入。
最后,你可以使用以下命令运行测试:
```
npm run test:unit
```
如果所有测试用例都通过,你就可以放心地将代码部署到生产环境中了。
阅读全文