Saya cuba memahami logik mengejek Vue-Router dengan Vitest.

Untuk melakukan ini, saya cuba menyediakan dan mensimulasikan persekitaran ujian saya pada projek yang sangat mudah. Apabila saya cuba mengikuti dokumentasi rasmi Vue-Test-Utils, saya sentiasa mendapat ralat. Saya tidak tahu sama ada kerana mereka menggunakan Jest.

Menggunakan vue-router sebenar telah menyelesaikan masalah saya, tetapi saya fikir mengejek vue-router adalah lebih baik.

Di bawah saya akan mula-mula menyampaikan kod sumber projek, dan kemudian ralat yang saya terima.

Home.vue

Jadi,Home.spec.tssepatutnya kelihatan seperti ini:

import { expect, it, vi } from 'vitest'; import { mount } from '@vue/test-utils'; import * as VueRouter from 'vue-router'; import Home from '../src/components/Home.vue'; describe('./path/to/Home.vue', () => { const useRouteSpy = vi.spyOn(VueRouter, 'useRoute'); const getWrapper = () => mount(Home as any, { global: { stubs: { 'router-link': { template: '
' }, 'router-view': { template: '
' }, }, }, }); it('the component should be mounted', () => { // ARRANGE const useRouteMock = useRouteSpy.mockImplementationOnce({ query: 'query' }); // ACT const wrapper = getWrapper(); // ASSERT expect(useRouteMock).toHaveBeenCalled(); expect(wrapper.exists()).toBeTruthy(); }); });

Beberapa komen/cadangan:

• Gunakan penerangan untuk menentukan konteks ujian
• Tentukan fungsi global untuk melekapkan komponen, menggunakan semula dan bukannya pendua
• Gunakan.spyOn()和.mockImplementation...()untuk pemantauan dan simulasi
• Gunakan beberapa cara berstruktur/langsung untuk menulis ujian, seperti AAA [susun, bertindak, tegaskan] atau GWT [diberi, bila, kemudian]. Saya telah mengujinya selama beberapa tahun dan masih menggunakannya, ia membantu saya memahami perkara yang saya uji
• Gunakan.toHaveBeenCalled...()untuk menyemak sama ada simulasi berfungsi seperti yang diharapkan
• mount()函数中的存根应与模板中使用的组件相关（因此，如果您不使用 , ia tidak sepatutnya disenaraikan sebagai rintisan)

Semoga ini membantu, sorakan!