如何在 vue.js 中對道具進行單元測試以查看它是否正確渲染

Question

我開始進行單元測試，這讓我有點困惑，在這里我只是想測試一下我的道具（藝術家）是否正確渲染，我嘗試了很多方法（通過更改藝術家和藝術家名稱值）但我總是以像這樣的錯誤：

expect(received).toBe(expected) // Object.is equality

    Expected: "bob"
    Received: undefined

所以在這一點上我有點困惑如何 go 關於這個，有人可以幫忙嗎？ 我有一種奇怪的感覺，我沒有正確編寫 propsData，但我不確定。

測試藝術家卡的組件：

<template>
  <div>
    <h1>Artist Page</h1>
    <div class="tile is-ancestor">
      <div class="tile is-parent" id="tileArtistName">
        <div class="tile is-child box">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <div>
                  <p class="title is-2">{{ artist.artistName }}</p>
                  <p class="subtitle is-4">{{ artist.primaryGenreName }}</p>
                </div>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <a
                  class="level-right"
                  id="itunesLogoArtist"
                  :href="artist.artistLinkUrl"
                >
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["artist"]
};
</script>

我的 ArtistCard.spec.js 測試文件

import { shallowMount, createLocalVue } from "@vue/test-utils";
import Buefy from "buefy";

import ArtistCard from "@/components/Home.vue";

describe("ArtistCard component unit test", () => {
  let wrapper;
  //let artistName = "bob";
  //let artist = "bob";
  let artistName = "bob";
  beforeEach(() => {
    const localVue = createLocalVue();
    localVue.use(Buefy);
    wrapper = shallowMount(ArtistCard, {
      localVue,
      propsData: {
        artist : artistName
      }
    });
  });
  test("check props", () => {
    expect(wrapper.vm.artist.artistName).toBe("bob");
  });
});

Answer 1

我開始進行單元測試，這讓我有點困惑，在這里我只是想測試一下我的道具（藝術家）是否正確渲染，我嘗試了很多方法（通過更改藝術家和藝術家名稱值）但我總是以像這樣的錯誤：

expect(received).toBe(expected) // Object.is equality

    Expected: "bob"
    Received: undefined

所以在這一點上我有點困惑如何 go 關於這個，有人可以幫忙嗎？ 我有一種奇怪的感覺，我沒有正確編寫 propsData，但我不確定。

測試藝術家卡的組件：

<template>
  <div>
    <h1>Artist Page</h1>
    <div class="tile is-ancestor">
      <div class="tile is-parent" id="tileArtistName">
        <div class="tile is-child box">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <div>
                  <p class="title is-2">{{ artist.artistName }}</p>
                  <p class="subtitle is-4">{{ artist.primaryGenreName }}</p>
                </div>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <a
                  class="level-right"
                  id="itunesLogoArtist"
                  :href="artist.artistLinkUrl"
                >
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["artist"]
};
</script>

我的 ArtistCard.spec.js 測試文件

import { shallowMount, createLocalVue } from "@vue/test-utils";
import Buefy from "buefy";

import ArtistCard from "@/components/Home.vue";

describe("ArtistCard component unit test", () => {
  let wrapper;
  //let artistName = "bob";
  //let artist = "bob";
  let artistName = "bob";
  beforeEach(() => {
    const localVue = createLocalVue();
    localVue.use(Buefy);
    wrapper = shallowMount(ArtistCard, {
      localVue,
      propsData: {
        artist : artistName
      }
    });
  });
  test("check props", () => {
    expect(wrapper.vm.artist.artistName).toBe("bob");
  });
});