javascript - 在 vue jest 中传递 propData 返回未定义

Question

我在 vue 中的 Jest 测试文件中传递 propData，但它没有将 propData 数据设置到组件，而是给出错误无法读取未定义的云的属性，我的对象写得对吗？

我的 Jest 测试文件

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>

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();
});