I have encountered an issue while passing the propData in my jest test file for a Vue component. It seems that the propData is not being set to the component and instead, I am receiving an error saying "cannot read property of clouds of undefined." Could it be that my object is not written correctly?
Here is a snippet of 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();
});
});
The component under testing is as follows:
<template>
<div>
<h2 class="weather-head">Weather Details</h2>
...
...
...
...
...
...
...
...