fix: useFetch in jest unit tests

[FloryanFilip]

trafficstars

🐛 The bug When unit testing a component that uses useFetch composable, I'm getting weird error.

🛠️ To reproduce Steps to reproduce the behavior:

1. Create a component that uses setup function with useFetch composable inside of it
2. Write a test suite with any unit test of said component
3. See error

I'd be very grateful for a link to a gist or repo that reproduces the bug.

🌈 Expected behaviour The test suite runs smoothly

ℹ️ Additional context My component

export default defineComponent({
  setup() {

    const { fetch } = useFetch(async () => {
      //
    });

    return {
      //
    };
  },

My test suite

describe('MainSearch', () => {
  let wrapper!: Wrapper<any>;
  const factory = (data?: object) => shallowMount(MainSearchComponent, {
    stubs: {
      ...
    },
    vuetify: new Vuetify(),
  });

  beforeEach(() => {
    wrapper = factory();
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it('should match snapshot', () => {
    expect(wrapper.html())
      .toMatchSnapshot();
  });

[danielroe]

@FloryanFilip I can't reproduce the error with your code. Note that useFetch is quite tightly coupled with Nuxt and it needs a number of global properties to be present on the instance in order to actually execute fetch(), which is probably why you're getting these errors (though not in your code snippets above).

[FloryanFilip]

@danielroe what do you mean by number of global properties? How can I make sure i have these?

[treebee]

I would also be interested in what setup steps are missing. I created a reproduction repo here

[jesus4497]

I'm facing the same issue! any updates on this @danielroe ?

[ashish141199]

Any updates ? Same issue.

[odranoelBR]

Yea, same here. Can't test a composable with "useFetch" inside.

The useFetch don't execute outside of setup env.