Vue 單元測試

vue vue單元測試單元測試

gior__ann 2019-10-31 14:34:00 ‧ 1676 瀏覽

分享至

網路上找了個例子來練習
但一直顯示紅色的地方沒測試到，反而另外一個好像測試了2次!??
不知道該怎麼寫

參考資源:https://lmiller1990.github.io/vue-testing-handbook/simulating-user-input.html#triggering-events

import { shallowMount, mount } from "@vue/test-utils"
import Click from '@/components/Click'

describe("Click測試", () => {
    it("測試message是否渲染出來", () => {
        const wrapper = shallowMount(Click)

        wrapper.find("[data-username]").setValue("alice")
        wrapper.find("form").trigger("submit.prevent")

        expect(wrapper.find(".message").text())
            .toBe("Thank you for your submission, alice.")
    })


    it("測試 handleSubmit()是否有將submitted設為true", () => {
        const wrapper = shallowMount(Click)

        wrapper.find("[data-username]").setValue("alice")
        wrapper.find("form").trigger("handleSubmit")

        expect(wrapper.vm.submitted).toBe(true)
    })
})

我也不知道還有那些關鍵字可以搜尋
請求各位大大，高手相助

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-10-31 14:59:45

雖然我還沒實測過

不過我有點懷疑

expect(wrapper.vm.submitted).toBe(true)

wrapper.vm.submitted 真的有辦法拿到 submitted 嗎

好

實測過可以拿到

所以你的問題會在

wrapper.find('form').trigger('handleSubmit');

他應該是 trigger form 的 event

但是你的 form 上面沒有 handleSubmit 這 event

改成

wrapper.find('form').trigger('submit.prevent');

就成功了

result

> demo@0.1.0 test:unit D:\demo\vue\191031\demo
> vue-cli-service test:unit

 PASS  tests/unit/example.spec.js
  Click測試
    √ 測試message是否渲染出來 (32ms)
    √ 測試 handleSubmit()是否有將submitted設為true (3ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.917s, estimated 2s
Ran all test suites.