passing propData in vue jest is returning undefined

问题

i'm passing the propData in my jest test file in vue but it's not set the propData data to component instead it's giving error cannot read property of clouds of undefined my object is written right?.please help. i'll provide more code if needed.

my jest test file

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

my component that i'm testing

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

///// ignore below this /////

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

回答1:

Typo. You need propsData, not propData you have currently.

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

来源：https://stackoverflow.com/questions/58961103/passing-propdata-in-vue-jest-is-returning-undefined