出现错误无法读取未定义的属性“销毁”

Question

我正在使用 jest 在 vuejs 中测试我的项目。 项目在代码转换为 vuex 之前运行正确，但在 vuex 中转换后出现以下错误，这是我的 RandomMeal.vue 文件。我正在做单独的存储文件夹来编写 API 操作和突变。从那里调用响应数组以获取输出

`<template>
      <div class="RandomMeal">
        <h2>here {{ randomMealArray.strCategory }}</h2>
        <div class="MealItem" v-for="item in randomMealArray" :key="item.idMeal">
          <b-card
            title="random meal"
            :img-src="item.strMealThumb"
            img-top
            tag="article"
            style="max-width: 18rem"
            class="mb-2"
          >
            {{ item.strMeal }}
    
            <br />
            <b-button
              variant="primary"
              id="getMealDetailsBtn"
              @click="getdata(item.idMeal)"
              >Get more Details</b-button
            >
          </b-card>
    
          <!-- <router-link :to="{name:'MealDetails', params:{ id: item.idMeal}}"></router-link> -->
        </div>
      </div>
    </template>
    
    
    
    <script>
    import Vue from "vue";
    import axios from "axios";
    import VueAxios from "vue-axios";
    Vue.use(VueAxios, axios);
    
    export default {
      name: "RandomMeal",
      data() {
        return {};
      },
    
      computed: {
        randomMealArray() {
          return this.$store.state.randomMealArray;
        },
      },
      mounted() {
        this.$store.dispatch("getRandomMeal");
      },
    
      methods: {
        getdata(id) {
          this.$router.push({ name: "MealDetails", params: { id } });
        },
      },
    };
    </script>
    
    
    <style scoped>
    .MealItem {
      display: inline-block;
      position: fixed;
      width: max-content;
      height: max-content;
      margin-top: 20px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    </style>` 
    Following is my randomMeal.spec.js
    `import { shallowMount, createLocalVue } from '@vue/test-utils'
    import RandomMeal from '@/components/Random-Meal.vue'
    import BootstrapVue from 'bootstrap-vue'
    
    
    describe('in a random meal component', () => {
      let wrapper;
      beforeEach(() => {
        const localVue = createLocalVue();
        localVue.use(BootstrapVue);
    
        wrapper = shallowMount(RandomMeal, {
          localVue,
    
          mocks: {
            $router: {
              push: jest.fn()
            }
          }
        });
    
      });
    
      afterEach(() => {
        wrapper.destroy();
      })
    
      it('is a vue instance', () => {
        expect(wrapper.isVueInstance).toBeTruthy();
      });
    
      it('should render the correct markup', () => {
        expect(wrapper.html()).toContain('<div class="RandomMeal">');
      });
    
      // it('should call getData on clicking get Details Button', async () => {
      //   wrapper.find('#getMealDetailsBtn').trigger('click')
    
      //   const expectedRoute = {
      //     name: 'MealDetails',
      //     params: {
      //       id: '52856',
      //     },
      //   };
      //   expect(wrapper.vm.$router.push).toHaveBeenCalledWith(expectedRoute)
      // });
    });
    `
    
    
    I got the following error
    
        [
          ● 
        
        in a random meal component › should render the correct p tag
        
            `TypeError`: Cannot read property 'html' of undefined
        
              35 |   });
              36 |   it('should render the correct p tag', () => {
            > 37 |     expect(wrapper.html()).toContain('<p class="instructions">');
                 |                    ^
              38 |   });
              39 |
              40 |
        
              at Object.<anonymous> (C:\Users\SMAHADAR\Documents\VUE Learning\From youtube(with bootstrap)../../../../../../meal-assignment/tests/unit/components/MealDetails.spec.js:37:20)
        
          ● in a random meal component › should render the correct p tag
        
            TypeError: Cannot read property 'destroy' of undefined
        
              24 |
              25 |   afterEach(() => {
            > 26 |     wrapper.destroy();
                 |             ^
              27 |   })
              28 |
              29 |   it('is a vue instance', () => {
    
  
 

 

 

Answer 1

wrapper 是一个局部变量，它等于undefiend。也许你想让它与 vue3 中的 ref 或 reactive 反应？