如何在jest中设置mock nuxt asyncData？

Question

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

预期的

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

测试结果

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

问题

有什么不同的方法可以让我测试这个依赖查询参数的函数吗？

Answer 1

因为 asyncData 在Vue被初始化之前被调用，这意味着 shallowMount 并非开箱即用。

例如

page:

<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)
  });
});

归功于 弗拉德-杜布罗夫斯基斯的意见: 在下一期中