在 vue jest 中传递 propData 返回 undefined

Question

我在 vue 中的 jest 测试文件中传递了 propData，但它没有将 propData 数据设置为组件，而是给出错误无法读取未定义云的属性我的对象写对了吗？请帮助。如果需要，我会提供更多代码。

我的笑话测试文件

import sideWeatherDetails from "@/components/sidemenu/sideWeatherDetails.vue";
import { mount, createLocalVue } from "@vue/test-utils";
import Vuex from "vuex";
window.alert = jest.fn();
const localVue = createLocalVue();
localVue.use(Vuex);
describe("check if convert temperature action is firing", () => {
  let actions;
  let store;
  beforeEach(() => {
    actions = {
      convertToFarenheit: jest.fn()
    };
    store = new Vuex.Store({
      actions
    });
  });

  it("convertToFarenheit is firing when checkbox is checked", () => {
    const propData = {
      clouds: { all: 40 },
      visibility: 2,
      main: { humidity: 40 },
      wind: { speed: 1.33 }
    };
    const wrapper = mount(sideWeatherDetails, { store, localVue, propData });
    const checkbox = wrapper.find({ ref: "convertTemp" });
    checkbox.setChecked();
    expect(actions.convertToFarenheit).toHaveBeenCalled();
  });
});

我正在测试的组件

<template>
  <div>
    <h2 class="weather-head">Weather Details</h2>
    <div class="side-info-value" v-if="data">
      <p>
        <span class="side-key data-key">Cloudy</span>
        <span class="data-value">{{ data.clouds.all }}%</span>
      </p>
    </div>
    <div class="side-info-value" v-if="data">
      <p>
        <span class="side-key data-key">Humidity</span>
        <span class="data-value">{{ data.main.humidity }}%</span>
      </p>
    </div>
    <div class="side-info-value" v-if="data">
      <p>
        <span class="side-key data-key">Visibility</span>
        <span class="data-value">{{ data.visibility / 1000 }} km</span>
      </p>
    </div>
    <div class="side-info-value" v-if="data">
      <p>
        <span class="side-key data-key">Wind</span>
        <span class="data-value">{{ data.wind.speed }} m/s</span>
      </p>
    </div>
    <div class="side-info-value">
      <p>
        <span class="side-key data-key">In Farenheit</span>
        <span class="data-value">
          <input ref="convertTemp" type="checkbox" @change="convertToFar()" />
        </span>
      </p>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  props: ["data"],
  methods: {
    convertToFar() {
      if (this.$refs.convertTemp.checked) {
        this.convertToFarenheit();
      } else {
        this.convertToCelsius();
      }
    },
    ...mapActions(["convertToFarenheit", "convertToCelsius"])
  }
};
</script>

///// 忽略下面这个 /////

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近还随着 Aldus PageMaker 等桌面出版软件（包括 Lorem Ipsum 的版本）而普及。

Answer 1

错字。您需要的是 propsData，而不是您目前拥有的 propData。

it("convertToFarenheit is firing when checkbox is checked", () => {
  const propsData = {
    clouds: { all: 40 },
    visibility: 2,
    main: { humidity: 40 },
    wind: { speed: 1.33 }
  };
  const wrapper = mount(sideWeatherDetails, { store, localVue, propsData });
  const checkbox = wrapper.find({ ref: "convertTemp" });
  checkbox.setChecked();
  expect(actions.convertToFarenheit).toHaveBeenCalled();
});