vm.$isServer returns false when using Jest in testEnvironment Node

Version

2.5.21

Reproduction link

https://github.com/futureaus/servue/tree/min-rep

Steps to reproduce

npm install --dev jest

What is expected?

.vue file to render correctly

What is actually happening?

  × renders file correctly (2710ms)

  ● renders file correctly

    ReferenceError: head is not defined

      at Object.eval (eval at <anonymous> (node_modules/lodash.template/index.js:1089:12), <anonymous>:8:11)
      at TemplateRenderer.renderSync (node_modules/vue-server-renderer/build.js:8020:16)
      at RenderContext.done (node_modules/vue-server-renderer/build.js:8264:39)
      at RenderContext.next (node_modules/vue-server-renderer/build.js:2459:19)
      at RenderContext.cachedWrite [as write] (node_modules/vue-server-renderer/build.js:2323:9)
      at RenderContext.next (node_modules/vue-server-renderer/build.js:2473:25)
      at cachedWrite (node_modules/vue-server-renderer/build.js:2323:9)
      at renderStringNode$1 (node_modules/vue-server-renderer/build.js:7599:5)
      at RenderContext.renderNode (node_modules/vue-server-renderer/build.js:7402:5)
      at RenderContext.next (node_modules/vue-server-renderer/build.js:2469:23)
      at cachedWrite (node_modules/vue-server-renderer/build.js:2323:9)
      at renderElement (node_modules/vue-server-renderer/build.js:7642:5)
      at renderNode (node_modules/vue-server-renderer/build.js:7406:5)
      at renderComponentInner (node_modules/vue-server-renderer/build.js:7524:3)
      at renderComponent (node_modules/vue-server-renderer/build.js:7488:5)
      at renderNode (node_modules/vue-server-renderer/build.js:7404:5)

undefined
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.839s, estimated 7s
Ran all test suites.

---

This only happens when using Jest, to test in a normal node environment use node tests/normal.js

Jest, or an error with the environment detection of Vue is causing global.process.env.VUE_ENV to return undefined instead of 'server'.

Jest is running in "testEnvironment" : "node"

The $isServer is being used in lib/imports/headify.js

[LinusBorg]

I think the issue is with docs, mainly., but the general ones for SSR, nothing jest-specific.

vue-server-renderer does set process.env.VUE_ENV = server. But you don’t pass that environment variable into your app bundle, so inside of our bundle, it’s not set, and consequently, $isServer returns false.

We need to update docs here: https://ssr.vuejs.org/guide/build-config.html#server-config

It’s demonstrated in the hackernew repo (here) but shoul definitely be mentioned in the docs explicitly, of course…

[loilo]

I needed $isServer to be true just for one individual Vue instance in my tests. Temporarily overriding Vue.prototype.$isServer was not an option since it is not writable.

Eventually I’ve found a solution which might be interesting for others, therefore I’ll share it here: I created a function which hotswaps a Vue instance’s whole prototype and replaces it with a proxy of itself which returns true when asked for $isServer:

function enableSsr(vm) {
  Object.setPrototypeOf(
    vm,
    new Proxy(Object.getPrototypeOf(vm), {
      get: (target, key, receiver) => key === '$isServer'
        ? true
        : Reflect.get(target, key, receiver)
    })
  )
}

You can use it like this:

const vm = new Vue(...)

enableSsr(vm)

If you have to test mixins or similar stuff that relies on $isServer, you may need to run that function pretty early, in a beforeCreate hook:

new Vue({
  beforeCreate() {
    enableSsr(this)
  },

  // ...
})

Hope this helps. 🙂