在测试期间更改 Vue“提供”数据答案

【问题标题】：Change Vue 'provide' data during test在测试期间更改 Vue“提供”数据
【发布时间】：2021-06-16 19:26:10
【问题描述】：

我使用vue-test-utils@1.1.3 和jest@26 来测试我的组件。

组件从父级获取provide 数据，并监视它的变化。父组件注入一个计算值。我想检查观察者（及其调用的功能）是否按预期工作。

我想知道如何更改我在测试中提供的模拟数据？

// ParentComponent.vue, using the @vue/composition-api plugin + syntax
setup() {
  let chosenItems = reactive({ items: [] })
  function UpdateItems(items) {
    chosenItems.items = [...items]
  }
  provide(
    "userItems",
    computed(() => chosenItems.items)
  )
  return { UpdateItems }
}

// The component I want to test, using options-api syntax
export default {
  inject: ["userItems"],
  watch: {
    "userItems.value": function (items) {
      // Do Things...
    },
  },
}

// The test code for the component
const wrapper = mount(ComponentToTest, {
  localVue,
  router,
  provide: {
    userItems() {
      return ["mockedItems"]
    },
  },
})
// And now, after mounting, I want to change the data was provided to test the watcher

【问题讨论】：

标签： vuejs2 jestjs vue-test-utils vue-composition-api

【解决方案1】：

除了调用wrapper.setData({ userItems: ["mockedNewItems"] }) 的解决方法之外，我找不到其他方法。

它会起作用并触发观察者，但就好像你正在改变提供的数据，这并不理想。

【讨论】：

感谢您的回复。为什么对提供的数据进行变异是一个问题？如果需要其他测试，我可以复制原始值，或者在beforeEach函数中初始化它
因为在真正的 Vue 组件中，子组件不应该改变注入的数据。就像子组件不应该改变道具一样。如果您调用 setData 并运行测试，您将在此类终端中看到警告，告诉您这是一种反模式。也就是说，测试可能不是问题。
@TzahiLeh 如果对您有帮助，请将我的回答标记为已接受?。

【解决方案2】：

或者，需要更多工作但不会改变提供的数据的方法是从ParentComponent.vue 中提取这部分：

setup() {
  let chosenItems = reactive({ items: [] })
  function UpdateItems(items) {
    chosenItems.items = [...items]
  }
  provide(
    "userItems",
    computed(() => chosenItems.items)
  )
  return { UpdateItems }
}

到一个单独的函数，它提供它（在一个单独的文件中）：

export default function provideChosenItems() {
  let chosenItems = reactive({ items: [] });
  function UpdateItems(items) {
    chosenItems.items = [...items];
  }
  provide(
    "userItems",
    computed(() => chosenItems.items)
  );
  return { UpdateItems };
}

因此，在您的测试中，您可以挂载父组件，模拟提供程序函数的实现，然后更改提供的数据：

import ParentComponent from "ParentComponent.vue";
import provideChosenItems from "provideChosenItems";
import VueCompositionApi, { provide, ref } from "@vue/composition-api";
import { createLocalVue, mount } from "@vue/test-utils";

const localVue = createLocalVue();
localVue.use(VueCompositionApi);

jest.mock("provideChosenItems");

describe("test", () => {
  it("test", () => {
    const mockedItems = ["mockedItems1"];

    provideChosenItems.mockImplementation(() => {
      provide("userItems", ref(mockedItems));
      return { UpdateItems: () => {} };
    });

    const wrapper = mount(ParentComponent, {
      localVue
    });

    mockedItems.push("mockedItems2");

    // Data is changed, so you can test what happens afterwards,
    // you could do something like
    // wrapper.findComponent(ComponentUnderTest) and assert on stuff
  });
});

【讨论】：

【解决方案3】：

_{不确定它是否适用于 vue2 组合 API，但它应该适用于具有类似语法的 vue3。}

解决方案的重点是“提供”inject 期望接收的东西，这是一个反应性引用。否则，对组件中的“监视”没有任何反应。

it('test provide watch effect', () => {
  const chosenItems = reactive({ items: ["mockItems"] });
  const items = computed(() => chosenItems.items)

  const wrapper = mount(ComponentToTest, {
    localVue,
    router,
    provide: {
      userItems() {
        return items
      },
    },
  })

  // doing stuff and await for mounting

  chosenItems.items = ["mockItems", "mockItems2"]

  // await flushPromise

  should('watch the change of chosenItems')
})

由于新的响应式系统应该在没有 Vue 的情况下继续存在，您可以直接在 vue 项目之外导入 ref、reactive、computed，在您的情况下是测试文件。

【讨论】：