Testing import.meta.client and/or import.meta.server

[dulnan]

In one of my modules I have changed occurrences of process.server and process.client to import.meta.server and import.meta.client. Previously I was able to write unit tests for both cases (e.g. when a component behaves differently on the client than on the server) by setting process.server = true in my test case. However, using import.meta, this does not work anymore. E.g. import.meta.server = true, which kind of makes sense.

I have searched discussions and issues and wasn't able to find anyone having the same issue, so I'm starting to wonder if maybe I'm approaching this the wrong way anyway? If not, the question would be how I could unit test a component (or any code, really) for different client and server behaviour.

[dosubot[bot]]

To unit test a component that behaves differently on the client and server using import.meta.server and import.meta.client, you can mock these properties in your test cases. Since you cannot directly set import.meta.server = true, you can use a mocking library like jest to simulate the environment.

Here is an example of how you can achieve this:

// Import the functions to be tested
import { useServerOnlyComposable, useClientOnlyComposable } from './path/to/your/module';

// Mock import.meta properties
Object.defineProperty(import.meta, 'client', {
  value: false,
  writable: true,
});

Object.defineProperty(import.meta, 'server', {
  value: true,
  writable: true,
});

describe('useServerOnlyComposable', () => {
  it('should throw an error when called on the client', () => {
    import.meta.client = true;
    expect(() => useServerOnlyComposable()).toThrow('this should not be called in the browser');
  });

  it('should not throw an error when called on the server', () => {
    import.meta.client = false;
    expect(() => useServerOnlyComposable()).not.toThrow();
  });
});

describe('useClientOnlyComposable', () => {
  it('should throw an error when called on the server', () => {
    import.meta.server = true;
    expect(() => useClientOnlyComposable()).toThrow('this should not be called on the server');
  });

  it('should not throw an error when called on the client', () => {
    import.meta.server = false;
    expect(() => useClientOnlyComposable()).not.toThrow();
  });
});

In this example, we use Object.defineProperty to mock import.meta.client and import.meta.server properties. This allows us to simulate the client and server environments in our unit tests.

Additionally, Nuxt provides a import.meta.test property that is true when running in a test context. You can leverage this property to conditionally handle test-specific logic in your components or composables if needed ^[1][2].

To continue talking to Dosu, mention @dosu.

[LLCampos]

From my testing, this doesn't work.

[dulnan]

In the meantime I found a solution that works for me. Instead of using import.meta.server or import.meta.client directly, I instead assign them to consts in a file, e.g. ~/helpers/importMeta.ts:

export const importMetaServer = import.meta.server

And then use it in the code I want to test:

import { importMetaServer } from '~/helpers/importMeta'

export function useFoobar() {
  if (importMetaServer) {
    return 'server'
  }
  return 'client'
}

Then it's possible to mock importMetaServer in tests:

import { useFoobar } from '~/composables/useFoobar'

const metaMock = vi.hoisted(() => ({
  importMetaServer: true,
}))

vi.mock('~/helpers/importMeta', () => metaMock)

function client() {
  metaMock.importMetaServer = false
}

function server() {
  metaMock.importMetaServer = true
}

describe('The composable', () => {
  beforeEach(() => {
    server()
  })

  it('works on server', () => {
    expect(useFoobar()).toEqual('server')
  })

  it('works on client differently', () => {
    client()
    expect(useFoobar()).toEqual('client')
  })
})