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>

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

您的测试失败了，因为您的var doc = { _id: date, foo: bar }组件实例属性正在传递一个没有嵌套属性的对象，该对象名为artist。实际上，您的对象看起来像这样：

artistName

要通过测试，请将您的断言更改为：

{
  artist: "bob"
}

或者，将expect(wrapper.vm.artist).toBe("bob");更改为：

（ES5语法）

propsData

（ES6 / ES2015语法）

propsData: {
  artist: {
    artistName: artistName
  }
}

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

1 个答案: