在vue开玩笑中传递propData返回未定义

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

我开玩笑的测试文件

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工作表,最近又发布了包括Alres PageMaker在内的桌面发行软件,包括Lorem Ipsum的版本。

liyunfei97 回答:在vue开玩笑中传递propData返回未定义

错别字。您需要 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();
});
本文链接:https://www.f2er.com/3063293.html

大家都在问