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

Question

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

预计

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

结果

但是尝试设置 propsData 仍然 returns 未定义：console.log(wrapper.vm.myQueryParam); // undefined 而我希望它是 'some-value'

问题

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

Answer 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 asyncData

How to set mock nuxt asyncData in jest

vue.js

jestjs

nuxt.js

vue-router

vue-test-utils

预计

结果

问题

示例：

页数：

测试：