Question

我正在用两个按钮构建一个非常基本的increment和decrement数量组件，并使用 Vue Test Utils 编写测试。问题在于，使用必需的道具productId安装组件会产生警告，提示productId丢失。 更奇怪的是是wrapper.props('productId')返回了2，这正是我通过的。 更奇怪的是是我写的测试通过了。

我很乐意将其报告为 vue-test-utils 存储库中的错误，但是，我认为可能有一个简单的解决方案。

以下是组件 AppGroupButtonItemCartQuantity ：

<template>
  <div class="flex items-center">
    <button
      :class="`increment-quantity ${buttonClass}`"
      @click="incrementProductQuantity(productId)"
    >
      +
    </button>
    <button
      :class="`decrement-quantity ${buttonClass}`"
      @click="decrementProductQuantity(productId)"
    >
      -
    </button>
  </div>
</template>
<script>
import { mapActions } from "vuex";

export default {
  props: {
    productId: {
      type: String,
      required: true
    }
  },
  computed: {
    buttonClass() {
      return "bg-gray-600 text-white leading-none flex-inline ml-1 w-5 h-5 rounded-full items-center justify-center";
    }
  },
  methods: mapActions("cart", [
    "incrementProductQuantity",
    "decrementProductQuantity"
  ])
};
</script>

这是我在 AppGroupButtonItemCartQuantity.spec.js 中编写的测试：

import { shallowMount, createLocalVue } from "@vue/test-utils";
import Vuex from "vuex";
import AppGroupButtonItemCartQuantity from "@/components/AppGroupButtonItemCartQuantity";

const localVue = createLocalVue();

localVue.use(Vuex);

let wrapper = null,
  store = null,
  getters = null,
  actions = null;

afterEach(() => {
  wrapper.destroy();
});

describe("AppGroupButtonItemCartQuantity.vue", () => {
  beforeEach(() => {
    actions = {
      incrementProductQuantity: jest.fn(),
      decrementProductQuantity: jest.fn()
    };

    getters = {};

    store = new Vuex.Store({
      modules: {
        cart: {
          actions,
          getters,
          namespaced: true
        }
      }
    });
  });

  it("renders the increment and decrement buttons", () => {
    wrapper = shallowMount(AppGroupButtonItemCartQuantity, {
      localVue,
      store,
      propsData: {
        productId: "2"
      }
    });

    expect(wrapper.get("button.increment-quantity"));
    expect(wrapper.get("button.decrement-quantity"));
  });

  it("dispatches increment quantity and decrement quantity actions for given product on click", () => {
    wrapper = shallowMount(AppGroupButtonItemCartQuantity, {
      localVue,
      store,
      propsData: {
        productId: "2"
      }
    });

    expect(wrapper.props("productId")).toBe("2"); // PASSES

    expect(actions.incrementProductQuantity).toHaveBeenCalledTimes(0);  // PASSES

    const incrementButton = wrapper.get("button.increment-quantity");

    incrementButton.trigger("click");

    expect(actions.incrementProductQuantity).toHaveBeenCalledWith(
      expect.anything(),
      "2"
    );  // PASSES

    expect(actions.decrementProductQuantity).toHaveBeenCalledTimes(0);  // PASSES

    const decrementButton = wrapper.get("button.decrement-quantity");

    decrementButton.trigger("click");

    expect(actions.decrementProductQuantity).toHaveBeenCalledWith(
      expect.anything(),
      "2"
    );  // PASSES
  });
});

这是输出：

 tests/unit/AppItemCartProduct.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Missing required prop: "productId"
      
      found in
      
      ---> <AppGroupButtonItemCartQuantity>
             <Anonymous>
               <Root>


Test Suites: 3 passed, 3 total
Tests:       14 passed, 14 total
Snapshots:   1 passed, 1 total
Time:        2.428s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

Vue Test Utils：即使对道具的测试通过，也缺少必需的道具

0 个答案: