Vue-Router-Simulation mit Vue-Test-Utils und Vitest
P粉190883225
2023-08-25 09:26:52
<p>Ich versuche die Logik zu verstehen, Vue-Router mit Vitest zu verspotten. </p>
<p>Zu diesem Zweck habe ich versucht, meine Testumgebung anhand eines sehr einfachen Projekts einzurichten und zu simulieren. Wenn ich versuche, der offiziellen Dokumentation von Vue-Test-Utils zu folgen, erhalte ich immer eine Fehlermeldung. Ich weiß nicht, ob es daran liegt, dass sie Jest benutzen. </p>
<p>Die Verwendung eines echten Vue-Routers hat mein Problem gelöst, aber ich denke, dass es besser ist, einen Vue-Router zu verspotten. </p>
<p> Im Folgenden werde ich zunächst den Quellcode des Projekts und dann die Fehler mitteilen, die ich erhalten habe. </p>
<h3>Home.vue</h3>
<pre class="brush:php;toolbar:false;"><script setup lang="ts">
import {onMounted} aus „vue“;
{useRoute} aus „vue-router“ importieren;
const route = useRoute()
onMounted(() => {
console.log(route.query)
})
</script>
<Vorlage>
<div>Home</div>
</template></pre>
<h3>首页.spec.ts</h3>
<pre class="brush:php;toolbar:false;">import {expect, it, vi} from "vitest";
{mount} aus „@vue/test-utils“ importieren;
Importieren Sie Home aus „../src/components/Home.vue“
it('Home Test', async () => {
const wrapper = mount(Home)
erwarten(wrapper.exists()).toBeTruthy()
})</pre>
<h3>vite.config.ts</h3>
<pre class="brush:php;toolbar:false;">/// <referencetypes="vitest" />
importiere { defineConfig } aus 'vite'
vue aus „@vitejs/plugin-vue“ importieren
// https://vitejs.dev/config/
Standard exportieren defineConfig({
Plugins: [vue()],
prüfen: {
Umgebung: 'jsdom',
include: ['./test/**/*.spec.ts'],
ausschließen: ['node_modules', 'dist'],
Globals: wahr
}
})</pre>
<h3>我的错误消息如下:..</h3>
<h3>我尝试过的方法</h3>
<p>我尝试像下面这样模拟 vue-router</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router', () => ({
useRoute: vi.fn(),
}))</pre>
<p>或者只是</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router')</pre>
<h4>这是我的最终 Home.spec.ts 文件</h4>
<pre class="brush:php;toolbar:false;">import {expect, it, vi} from "vitest";
{mount} aus „@vue/test-utils“ importieren;
Importieren Sie Home aus „../src/components/Home.vue“
vi.mock('vue-router')
it('Home Test', async () => {
const wrapper = mount(Home, {
global: {
Stubs: ["router-link", "router-view"]
}
})
erwarten(wrapper.exists()).toBeTruthy()
})</pre></p>
首先,我希望在
Home.vue
中看到router-link
或router-view
:因此,
Home.spec.ts
应该是这样的:一些评论/建议:
.spyOn()
和.mockImplementation...()
进行监视和模拟.toHaveBeenCalled...()
检查模拟是否按预期工作mount()
函数中的存根应与模板中使用的组件相关(因此,如果您不使用
,它不应该被列为存根)希望有帮助, 干杯!