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

Posted 2023-02-22

【中文标题】如何测试 nuxt.js asyncData 并获取钩子

【英文标题】：How to test nuxt.js asyncData and fetch hooks

【发布时间】：2020-12-17 15:34:59

【问题描述】：

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

登录.vue

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

注册.vue

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），但我不知道他们

好的，我解决了这个问题！ ，我该如何选择你的答案？

【参考方案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`