How to to jest test inside nuxt-bridge

[MatthD]

Environment

---

• Operating System: Darwin
• Node Version: v16.16.0
• Nuxt Version: 2.16.0-27720022.54e852f
• Nitro Version: 0.5.4
• Package Manager: [email protected]
• Builder: webpack
• User Config: alias, head, css, plugins, components, buildModules, tailwindcss, modules, basic, robots, sentry, i18n, gtm, runtimeConfig, auth, axios, build, serverHandlers, devServerHandlers, bridge
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: (), @nuxtjs/[email protected], [email protected], @nuxt/[email protected]

---

Reproduction

composables/config.ts

type Config = {
  categories: string[];
  featureFlags: string[];
  languages: string[];
};

const config = reactive<Config>({
  categories: [],
  featureFlags: [],
  languages: [],
});
export const useConfig = () => {
  $fetch<Config>('/url')
    .then(({ categories }) => {
      config.categories = categories;
    })
    .catch(console.error);
  return config;
};

config.spec.ts

import { mount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import { useConfig } from './config'; //importing the composable

const mockedGetConfig = {
  categories: ['first'],
  featureFlags: ['header', 'footer'],
  languages: ['fr'],
};

describe('Config', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });
  it('Should return config from hook when called', async () => {
    const Comp = {
      template: `<div>Fake component {{config}}</div>`,
      setup() {
        const config = useConfig();
        return { config };
      },
    };
    const wrapper = mount(Comp);
    await flushPromises();
    expect(wrapper.vm.config).toStrictEqual({
      categories: ['first'],
      featureFlags: ['header', 'footer'],
      languages: ['fr'],
    });
  });
});

The error

Describe the bug

Jest failed to execute test when auto import composables of nuxt are used

Trying to test a composables that use reactive auto-import lead to ReferenceError: reactive is not defined
I tried to install @nuxt/test-utils but it's not compatible with nuxt-bridge.

What is the way to do unit testing on nuxt-bridge with auto import inside ?

Additional context

No response

Logs

No response

[antlionguard]

can you share small reproduction?

[MatthD]

Yes sure (will add it to the reproduction inside the desc)

composables/config.ts

type Config = {
  categories: string[];
  featureFlags: string[];
  languages: string[];
};

const config = reactive<Config>({
  categories: [],
  featureFlags: [],
  languages: [],
});
export const useConfig = () => {
  $fetch<Config>('/url')
    .then(({ categories }) => {
      config.categories = categories;
    })
    .catch(console.error);
  return config;
};

config.spec.ts

import { mount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import { useConfig } from './config'; //importing the composable

const mockedGetConfig = {
  categories: ['first'],
  featureFlags: ['header', 'footer'],
  languages: ['fr'],
};

describe('Config', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });
  it('Should return config from hook when called', async () => {
    const Comp = {
      template: `<div>Fake component {{config}}</div>`,
      setup() {
        const config = useConfig();
        return { config };
      },
    };
    const wrapper = mount(Comp);
    await flushPromises();
    expect(wrapper.vm.config).toStrictEqual({
      categories: ['first'],
      featureFlags: ['header', 'footer'],
      languages: ['fr'],
    });
  });
});

The error

[wattanx]

I believe there's no way to solve Auto Import with Jest.
It's not impossible if you do something like this:

// jest.setup.ts
import * as vue from 'vue';
for (const key of Object.keys(vue)) {
  global[key] = vue[key];
}

However, personally, I think it would be better to use https://github.com/antfu/unplugin-auto-import with Vitest.

[wattanx]

It will be closed as there is no reaction for some time.
You can open it again if you have bugs or questions.