如何对道具进行单元测试，以查看vue.js中的玩笑是否正确渲染了道具

Question

我正在进行单元测试，这让我有些困惑，在这里我只是想进行测试以查看我的道具（艺术家）是否正确渲染，我尝试了多种方法（通过更改artist和artistName值），但是我总是以失败告终出现错误，例如：

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

    Expected: "bob"
    Received: undefined

因此，在这一点上，我有点困惑如何继续下去，有人可以帮忙吗？我有一种奇怪的感觉，我没有正确编写propsData，但是不确定。

测试artistCard的组件：

<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>

My 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

您的测试失败，因为正在向您的artist组件实例prop提供一个没有嵌套属性artistName的对象。实际上，您的对象看起来像这样：