Question

我让我的组件与 VUEX 商店一起使用，但在测试期间，我收到以下错误：

 ● farewell/list.vue › renders all farewells
    TypeError: this.allFarewellsAssociatedWithGreeting is not a function

我的组件、测试和存储 getter 代码发布在下面。

我更新了我的组件以使测试通过，但随后实际的应用程序无法运行。当商店更新时，组件不会呈现。这段代码也贴在下面。

如果我可以提供任何其他帮助来帮助解决问题，请告诉我。或者，如果我可以采取任何步骤来进一步排除故障。

感谢您花时间帮助新手?

这是我的组件：

<template>
  <div>
    <p>Associated Farewells:</p>
    <ul>
      <li
        v-for="farewell in farewells"
        :key="farewell['id']"
      >
        {{ farewell["attributes"]["message"] }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: 'FarewellList',
  props: [
    'greeting',
  ],
  components: {
  },
  computed: {
    ...mapGetters("farewells", ["allFarewellsAssociatedWithGreeting"]),
    farewells: {
      get() {
        return this.allFarewellsAssociatedWithGreeting(this.greeting);
      }
    }
  },
  mounted() {
    this.getFarewells();
  },
  methods: {
    ...mapActions("farewells", ["getFarewells"])
  }
};
</script>

这是我的测试：

import { shallowMount } from "@vue/test-utils";
import Vuex from "vuex";
import Create from "@/components/farewell/list.vue";

describe("farewell/list.vue", () => {
  it("renders all farewells", () => {
    const expectedMessage = "arbitrary message";
    const expectedFarewell = {
      attributes: {
        message: expectedMessage
      }
    };
    let getters = {
      allFarewellsAssociatedWithGreeting: jest.fn(),
    };
    getters.allFarewellsAssociatedWithGreeting.mockReturnValue([expectedFarewell]);
    let actions = {
      getFarewells: jest.fn(),
    };
    let store = new Vuex.Store({
      modules: {
        farewells: {
          namespaced: true,
          getters,
          actions
        }
      }
    });
    const wrapper = shallowMount(Create, {
      global: {
        plugins: [store]
      }
    });
  });
});

这是我的商店吸气剂：

export const getters = {
  allFarewellsAssociatedWithGreeting: state => greeting => {
    return state.farewells.filter(farewell => {
      return farewell.relationships.greeting.data.id === greeting.id
    });
  },
};

export default getters;

这是允许测试通过但会破坏实际应用程序的组件代码版本。组件不会使用商店中更新的数据重新渲染。

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: 'FarewellList',
  props: [
    'greeting',
  ],
  components: {
  },
  computed: {
    farewells: {
      get() {
        return this.fetchFarewells();
      }
    }
  },
  mounted() {
    this.getFarewells();
  },
  methods: {
    ...mapGetters("farewells", ["allFarewellsAssociatedWithGreeting"]),
    ...mapActions("farewells", ["getFarewells"]),
    fetchFarewells() {
      return this.allFarewellsAssociatedWithGreeting(this.greeting);
    },
  }
};
</script>

Answer 1

问题是实际的 allFarewellsAssociatedWithGreeting getter 返回一个返回数组的函数，但它的模拟 getter 返回数组而不是函数。

修复只是让模拟返回一个函数：

// getters.allFarewellsAssociatedWithGreeting.mockReturnValue([expectedFarewell]);

getters.allFarewellsAssociatedWithGreeting.mockReturnValue(() => [expectedFarewell]);

demo

VUEX Getter 在测试期间出错：TypeError: this.[method_name] is not a function

1 个答案: