javascript - 在 vue jest 中传递 propData 返回 undefined
问题描述
我在 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 的版本)而普及。
解决方案
错字。您需要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();
});
推荐阅读
- angular - 如何在支持 i18n 的 Microsoft IIS 上部署 Angular 10 应用程序
- python - TKINTER:选择某个下拉值时,如何制作按钮做其他事情?
- git - 有没有办法将 Git 提交历史作为文件系统来浏览?
- typescript - 打字稿打字相关类型
- javascript - Jquery-仅使用具有类属性的第一个元素动态创建 ul
- python - 引用参数的 GNU 并行转义空间和 python 无法解析标志
- google-cloud-vision - 无法加载 VALIDATE 数据集
- ios - Xcode 12 中的 SwiftUI @ViewBuilder 问题无法在 View 扩展中编译项目
- spring-boot - 无法在 Apache Camel 中创建队列连接工厂
- php - 这是一个充分准备好的陈述吗?