我正在 VueJS 應用程式上使用 vitest 撰寫單元測驗。
作為我們應用程式的一部分，我們有一組 API 包裝服務，例如users.js，它包裝我們的相關 API 呼叫以檢索用戶資訊：
import client from './client'
const getUsers = () => {
return client.get(...)
}
export default {
getUsers
}
這些服務中的每一個都使用一個公共client.js，而后者又用于axios進行 REST 呼叫和攔截器管理。
對于我們的單元測驗，我想檢查url是否呼叫了相關的，所以想監視或模擬client.
我關注了各種示例和帖子，但努力弄清楚我如何模擬匯入（client）的匯入（users.js）。
我能夠得到的最接近（基于這些帖子 - 1、2）是：
import { expect, vi } from 'vitest'
import * as client from '<path/to/client.js>'
import UsersAPI from '<path/to/users.js>'
describe('Users API', () => {
beforeEach(() => {
const spy = vi.spyOn(client, 'default') // mock a named export
expect(spy).toHaveBeenCalled() // client is called at the top of users.js
})
test('Users API.getUsers', () => {
UsersAPI.getUsers()
expect(spy).toHaveBeenCalled()
})
})
但它正在絆倒：
? async frontend/src/api/client.js:3:31
2| import store from '@/store'
3|
4| const client = axios.create({
| ^
5| headers: {
6| 'Content-Type': 'application/json'
它仍在嘗試加載真實client.js檔案的地方。
我似乎無法client明確地模擬，因為import陳述句首先運行，因此在我修改/攔截它之前client被匯入內部。users.js我的模擬嘗試如下（放在匯入和 之間describe）：
vi.mock('client', () => {
return {
default: {
get: vi.fn()
}
}
})
uj5u.com熱心網友回復：
模擬一個模塊
vi.mock()的路徑引數需要決議為被測模塊正在使用的同一檔案。如果users.jsimports <root>/src/client.js,vi.mock()的路徑引數需要匹配：
// users.js
import client from './client' // => resolves to path/to/client.js
// users.spec.js
vi.mock('../../client.js') // => resolves to path/to/client.js
在這里使用路徑別名通常會有所幫助。
監視/模擬功能
要監視或模擬模擬模塊的test()功能，請執行以下操作：
- 動態匯入模塊，獲取模擬模塊。
- 模擬模擬模塊參考的函式，可選擇回傳模擬值。由于return ，它
client.get()回傳axios.get()a ，所以使用它來模擬回傳的資料Promise是有意義的。mockResolvedValue()
// users.spec.js
import { describe, test, expect, vi } from 'vitest'
import UsersAPI from '@/users.js'
vi.mock('@/client')
describe('Users API', () => {
test('Users API.getUsers', async () => {
1??
const client = await import('@/client')
2??
const response = { data: [{ id: 1, name: 'john doe' }] }
client.default.get = vi.fn().mockResolvedValue(response)
const users = await UsersAPI.getUsers()
expect(client.default.get).toHaveBeenCalled()
expect(users).toEqual(response)
})
})
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477671.html
標籤：javascript Vue.js 单元测试 ecmascript-6 测试
上一篇：Angular13反向代理Web套接字錯誤404未找到
下一篇：字串索引超出范圍的問題