如何测试 nuxt.js asyncData 并获取钩子答案

【问题标题】：How to test nuxt.js asyncData and fetch hooks如何测试 nuxt.js asyncData 并获取钩子
【发布时间】：2020-12-17 15:34:59
【问题描述】：

我一直在尝试测试使用 nuxt（asyncData 和 fetch 挂钩）的文件，我在测试 vue.js 正常生命周期时没有问题，但我注意到 vue/test-utils 没有给出关于如何使用的明确说明测试nuxt的钩子。

asyncData() {
 const email = localStorage.getItem("email") || ""
 const password = localStorage.getItem("password") || ""
 return { email, password }
},
mounted() {
 this.setMaxStep()
}

async fetch({ store, redirect, query }) {
  const res = await store.dispatch("getSavedFormData")
  if (res) {
    store.dispatch("setNotification", {
      message: "Previous application is loaded"
    })
  }
},

尝试像下面这样测试它，但我没有运气（也尝试了其他各种方法，但我不知道在哪里寻找信息）


import {
  shallowMount,
  config
} from "@vue/test-utils"
import Login from "../../../pages/login

describe("Login", () => {

  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(Login)
  })

  it("gets asyncData", async () => {
    await wrapper.vm.asyncData
  })
})

【问题讨论】：

Nuxt 是第三方库，支持它不是测试工具的责任。见nuxtjs.org/guide/development-tools。您可以直接测试钩子，但这样您的测试方式可能与实际框架行为不同。
有没有办法通过测试 vue/test-utils 测试 nuxt 钩子我只想介绍 fetch 和 asyncData 部分。使用上述方法不会将覆盖率与 vue/test-utils 合并。
asyncData 和 fetch 是完全依赖于 Nuxt 工作原理的自定义 API，并适用于 Vue 组件超集的页面。 vue/test-utils 在这一点上无关紧要，因为它们不属于 Vue API。您可以通过调用 Login.asyncData(mockedContext) 手动测试它们（不是 vm.asyncData，因为它在组件实例化之前并且不属于实例），然后将模拟数据传递给 shallowMount。或者将其留给 e2e，如上面的链接所示。或两者。可能有第三方测试助手可以让这更容易（同样，不是 test-utils），但我不知道他们
好的，我解决了这个问题！，我该如何选择你的答案？

标签： vue.js jestjs nuxt.js vue-test-utils

【解决方案1】：

迟到的答案，但我希望这对刚接触这个问题的人有所帮助。

当我遇到这个问题时，我所做的只是在安装（或浅安装）组件时添加data() 方法：

// import shallowMount & component/page to be tested

const wrapper = shallowMount(Component, {
   data() {
      // assuming username data is the data needed by component
      username: 'john.doe'
   }
})

由于asyncData() 在服务器上运行，我们的测试失败了，因为asyncData() 从未运行过，因此，预期的数据永远不会得到。

因此，使用data() 方法提供客户端数据是有意义的，以便组件/页面在运行测试时拥有必要的数据。

【讨论】：

【解决方案2】：

Gyen Abubakar's answer 可以是一个解决方案，如果您只想使用模拟数据测试组件的行为。但请记住，asyncData 和 fetch 挂钩未经过测试，您可能需要测试它们以获得更好的单元测试。

如果你想测试你的 asyncData 和 fetch 钩子，你需要在挂载组件后添加：

异步数据

wrapper = shallowMount(Login);
wrapper.setData({
  ...(await wrapper.vm.$options.asyncData({ store })) // add more context here
});

获取钩子

wrapper = shallowMount(Login);
await Login.fetch.call(wrapper.vm); // using `call` to inject `this`

【讨论】：