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

Posted 2023-02-22

【中文标题】VUEX Getter 在测试期间出现错误：TypeError: this.[method_name] is not a function

【英文标题】：VUEX Getter is Getting Error During Testing: TypeError: this.[method_name] is not a function

【发布时间】：2021-09-09 01:43:01

【问题描述】：

我让我的组件与 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>

【参考方案1】：

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

解决方法就是让模拟返回一个函数：

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

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

demo

【讨论】：

感谢您抽出宝贵时间帮助解决此问题。您的解决方案使我找到了解决问题的方法，并进一步了解了 javascript 的虚拟 getter/setter。再次感谢??