Przekazuję propData w moim pliku testowym w vue, ale nie ustawiłem danych propData na komponent, zamiast tego daje błąd nie można odczytać właściwości chmur niezdefiniowanych mój obiekt jest napisany dobrze? .proszę o pomoc. w razie potrzeby podam więcej kodu.

Mój plik testowy jest

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

Mój komponent, który testuję

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

///// zignoruj poniżej /////

Lorem Ipsum to po prostu fikcyjny tekst z branży poligraficznej i składu. Lorem Ipsum jest standardowym tekstem zastępczym w branży od XVI wieku, kiedy nieznana drukarka wzięła galerię czcionek i zaszyfrowała ją, aby stworzyć książkę z wzorami. Przetrwał nie tylko pięć wieków, ale także skok do elektronicznego składu, pozostając zasadniczo niezmieniony. Został spopularyzowany w latach sześćdziesiątych XX wieku wraz z wydaniem arkuszy Letraset zawierających fragmenty Lorem Ipsum, a ostatnio z oprogramowaniem do druku komputerowego, takim jak Aldus PageMaker, w tym wersje Lorem Ipsum.

0
Naveen Kashyap 20 listopad 2019, 21:28

1 odpowiedź

Najlepsza odpowiedź

Literówka. Potrzebujesz propsData, a nie propData, które masz obecnie.

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();
});
2
Alexander Staroselsky 23 listopad 2019, 19:36
Więc nazwa jest ustalona, ​​nie mogę jej zmienić?
 – 
Naveen Kashyap
21 listopad 2019, 15:55
Jeśli usunę v-if="data" i dodam propsData, nadal zgłosi błąd [Vue warn]: Błąd w renderowaniu: "TypeError: Cannot read property 'clouds' undefined"
 – 
Naveen Kashyap
21 listopad 2019, 16:12
Sprawdź to tutaj jest moje repozytorium github github.com/naveenkash/vue-pogoda ta nazwa pliku to sideweatherdetails.vue i jego test jest w fazie test/sidemenu_test
 – 
Naveen Kashyap
21 listopad 2019, 16:15
Czy możesz mi pomóc
 – 
Naveen Kashyap
22 listopad 2019, 16:13