Simulating a server-side/client-side request by setting process.client or process.server

[silverbackdan]

I some unit tests, before using this setup I was able to set process.client = false or process.server and then in my test it would be set to false so I can ensure certain expectations e.g.

test.todo('API Url set correctly for server-side requests', () => {
    let $cwa
    // todo: why can we not set the process vars in the test
    process.client = false

    $cwa = createCwa({ storeName })
    expect($cwa.apiUrl).toBe('https://api-url-not-set.com')

    $cwa = createCwa({ storeName, apiUrl: 'https://api-url', apiUrlBrowser: 'https://api-url-browser' })
    expect($cwa.apiUrl).toBe('https://api-url')

    $cwa = createCwa({ storeName, apiUrlBrowser: 'https://api-url-browser' })
    expect($cwa.apiUrl).toBe('https://api-url-browser')
  })

These are just unit tests and I'm wondering why this does not work using this setup and if there's a better way to do this that is supported in my unit tests?

[silverbackdan]

I think the issue may stem from here:
https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts#L16-L23

Where the ssr override is being set so I cannot set whether a unit/function would behave in a certain way if called server-side or client-side renders

[silverbackdan]

To test this we can create a composable to test:

export const useProcess = () => {
  return {
    isClient: process.client,
    isServer: process.server
  }
}

and the tests:

import { describe, test, expect } from 'vitest'
import { useProcess } from '#cwa/runtime/composables/process'

describe('process composable', () => {
  test('should return correct values for client/server flags IF env is client-side', () => {
    process.client = true
    process.server = false

    expect(useProcess()).toEqual({
      isClient: true,
      isServer: false
    })
  })

  // THIS TEST FAILS AS WE CANNOT OVERWRITE process.server OR process.client
  test('should return correct values for client/server flags IF env is server-side', () => {
    process.client = false
    process.server = true

    expect(useProcess()).toEqual({
      isClient: false,
      isServer: true
    })
  })
})

This happens on test files whether we are using nuxt-vitest or not if this package and the module is enabled.

[danielroe]

Yes, the 'nuxt' environment exposed by this module is purely client-side. Simulating a server environment is a little more complex than setting process.server as we also need to create a nitro environment and mock various nitro behaviour.

This is on the roadmap but not a top priority.

Let's track in https://github.com/danielroe/nuxt-vitest/issues/201.