jestをテストランナーにしたvue-test-utilsの単体テストで、外部クラスのメソッドをmock化してテストしているのですが、うまくいかないです。
★以下テスト対象vueファイル(Home.vue)
<template>
<div>
<button v-on:click="tryTest">test</button>
★以下呼び出し対象ファイル(TestService.js)
export default class TestService {
test(){
return "from testService";
}
}
★以下テストファイル(test.test.js)
import vue from "vue";
import { shallowMount,createLocalVue } from "@vue/test-utils";
import home from "../components/Home.vue";
import testService from "../services/TestService";
// import {jest} from '@jest/globals';
const localVue = createLocalVue();
localVue.use(new vue);
jest.mock("../services/TestService",()=>{
return {
test: jest.fn(()=>"from testService")
// test: jest.fn().mockImplemantion(()=>
// "from testService"
// )
}
})
const component = shallowMount(home,()=>{
localVue
});
test("click action test",async()=>{
let button = component.findAll("button");
button.trigger("click");
expect(component.vm.testData).toEqual("from testService");
})
★以下エラー文言
FAIL resources/js/test/test.test.js (9.34 s)
✕ click action test (29 ms)
● click action test
expect(received).toEqual(expected) // deep equality Expected: "from testService" Received: "test_data" 27 | let button = component.findAll("button"); 28 | button.trigger("click"); > 29 | expect(component.vm.testData).toEqual("from testService"); | ^ 30 | }) at Object.<anonymous> (resources/js/test/test.test.js:29:35)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 14.052 s
Ran all test suites.
npm ERR! Test failed. See above for more details.
dataのtestDataをTestService.jsから返ってきた、"from testService"に変えて、それを確認したいのですができません。
mockの仕方などが公式ドキュメントやネット上で検索をしてもいまいち理解できません。
mockの仕方が正しいかも含めて教えていただきたいです。
よろしくお願いします。
★環境等
docker 20.10.5
laravel 8.33.1
node 14.2.0
npm 6.14.4
jest 26.6.3
vue-test-utils 1.1.3
vue 2.6.12
あなたの回答
tips
プレビュー