Как выполнить модульное тестирование реквизита, чтобы увидеть, правильно ли он отображается с помощью jest в vue. js

Question

Я начинаю с модульного тестирования, и это меня немного смущает, здесь я просто хочу сделать тест, чтобы увидеть, правильно ли рендеринг моих исполнителей (художников), я пробовал много способов (изменяя значения artist и artistName), но я всегда в конечном итоге с ошибкой вроде:

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

    Expected: "bob"
    Received: undefined

Так что в этот момент я немного запутался, как go об этом, кто-нибудь может помочь? У меня странное ощущение, что я неправильно пишу 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>

Моя карта художника. spe c. 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 экземпляра компонента передается объект, у которого нет вложенного свойства с именем artistName. Фактически ваш объект выглядит следующим образом:

{
  artist: "bob"
}

Чтобы пройти тест, либо измените утверждение на:

expect(wrapper.vm.artist).toBe("bob");

Или измените propsData на:

(синтаксис ES5)

propsData: {
  artist: {
    artistName: artistName
  }
}

(синтаксис ES6 / ES2015)

propsData: {
  artist: {
    artistName
  }
}