如何在玩笑中设置模拟 nuxt asyncData答案

【问题标题】：How to set mock nuxt asyncData in jest如何在玩笑中设置模拟 nuxt asyncData
【发布时间】：2020-09-18 17:09:45
【问题描述】：

我正在使用 Nuxt.js 并想通过 Jest 测试使用 asyncData 的页面。我有一个工厂函数来设置我的包装器，但它基本上返回一个shallowMount。

预期

单击按钮时，我希望函数根据查询参数表现出不同的行为。在运行测试时，我想通过在创建包装器时直接设置它来模拟它（类似于设置 propsData）。例如。 const wrapper = factory({ propsData: { myQueryParam: 'some-value' } });

结果

但是尝试设置 propsData 仍然返回 undefined: console.log(wrapper.vm.myQueryParam); // undefined 而我希望它是 'some-value'

问题

对于如何测试这个依赖于查询参数的函数，是否有不同的方法？

【问题讨论】：

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

【解决方案1】：

因为 asyncData 在 Vue 初始化之前被调用，这意味着 shallowMount 不能直接使用。

示例：

页面：

<template>
    <div>Your template.</div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    async asyncData({
      params,
      error,
      $axios
    }) {
        await $axios.get("something")
    }
  }
</script>

测试：

import { shallowMount } from "@vue/test-utils";
describe('NewsletterConfirm', () => {
  const axiosGetMock = jest.fn()
  const axiosPostMock = jest.fn()
  var getInitialised = async function (thumbprint) {
    if (thumbprint == undefined) throw "thumbprint not provided"

    let NewsletterConfirm = require('./_thumbprint').default
    if (!NewsletterConfirm.asyncData) {
      return shallowMount(NewsletterConfirm);
    }

    let originalData = {}
    if (NewsletterConfirm.data != null) {
      originalData = NewsletterConfirm.data()
    }
    const asyncData = await NewsletterConfirm.asyncData({
      params: {
        thumbprint
      },
      error: jest.fn(),
      $axios: {
        get: axiosGetMock,
        post: axiosPostMock
      }
    })
    NewsletterConfirm.data = function () {
      return {
        ...originalData,
        ...asyncData
      }
    }

    return shallowMount(NewsletterConfirm)
  }
  it('calls axios', async () => {
    let result = await getInitialised("thumbprint")
    expect(axiosGetMock).toHaveBeenCalledTimes(1)
  });
});

致VladDubrovskis for his comment: in this nuxt issue

【讨论】：

在 nuxt 2.15 上，我需要使用 NewsletterConfirm.options.data 使其工作。