在 vue jest 中传递 propData 返回 undefined

Posted 2023-02-22

【中文标题】在 vue jest 中传递 propData 返回 undefined

【英文标题】：passing propData in vue jest is returning undefined

【发布时间】：2020-03-16 13:40:33

【问题描述】：

我在 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 的版本）而普及。

【参考方案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();
);

【讨论】：

所以名字是固定的我不能改吗？

如果我删除 v-if="data" 并添加 propsData 它仍然会抛出错误 [Vue warn]: Error in render: "TypeError: Cannot read property 'clouds' of undefined"

在这里查看这是我的github repo github.com/naveenkash/vue-weather这个文件名是sideweatherdetails.vue，它的测试正在test/sidemenu_test中

你能帮我解决这个问题吗