Vue. js модульный тест дочернего объекта emit вызывает родительскую функцию

Question

Я немного озадачен. Я пытаюсь провести модульное тестирование дочернего элемента (компонент RatingItem), отправляющего родительский компонент. Вот код теста:

it("rating component should emit call to parent updateRating function", () => {
    const wrapper = factory({});
    const ratingComp = wrapper.find({ref: "ratings"});
    ratingComp.vm.$emit("updateRating", 1);
    expect(wrapper.emitted().updateRating).toEqual(1);
    expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
  });

Это код внутри родительского компонента. Внутри него вы можете увидеть компонент RatingItem:

    <template>
      <div>
        <div class="overlay" v-show="isModalOpen" @click="closeModal"></div>

        <div ref="modal" class="modal" v-show="isModalOpen">
          <div slot="header" class="modal_header">
            <div class="modal_header_title">{{headerTitle}}</div>
            <div @click="closeModal" class="modal_header_close">
              <img src="../assets/modal_close_icon.svg" />
            </div>
          </div>

          <div>
            <label>Restaurant Rating</label>
            <!-- rating component -->
            <ratingsItem ref="ratings" :rating="rating" :starSizePerc="12" @updateRating="updateRating"></ratingsItem>
          </div> 

          <!-- footer -->
          <button class="pointer cancel_btn" @click="closeModal">Cancel</button>
          <button class="pointer space_left save_btn" @click="submitDetails()">Save</button>
        </div>
      </div>
    </template>

Но когда я запускаю тест, я получаю эту ошибку:

expect(received).toEqual(expected) // deep equality

    Expected: 1
    Received: undefined

      71 |   
      72 | 
    > 73 |     expect(wrapper.emitted().updateRating).toEqual(1);
         |                                            ^
      74 |     // expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
      75 |   });
      76 | });

Может кто-нибудь помочь?

Answer 1

Я понял, это то, что я использовал ниже:

it("rating  component should emit call to parent updateRating function", () => {
    const wrapper = factory({});
    const updateRating = jest.fn();
    wrapper.setMethods({ updateRating });
    wrapper.find({ ref: "ratings" }).vm.$emit("updateRating", { idx: 9 });
    expect(updateRating).toHaveBeenCalled();
    expect(updateRating).toHaveBeenCalledWith({ idx: 9 });
  });

Спасибо за вашу помощь с этим :)

Answer 2

Я проверил vue-test-utils документы на «излучение»: https://vue-test-utils.vuejs.org/api/wrapper/emitted.html

Можете ли вы попытаться обернуть его в vm.$nextTick:

it("rating component should emit call to parent updateRating function", (done) => {
    const wrapper = factory({});
    const ratingComp = wrapper.find({ref: "ratings"});
    ratingComp.vm.$emit("updateRating", 1);
    wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().updateRating).toEqual(1);
       expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
       done()
    })
  });