Cypress component test throws "process is not defined"

Question

I'm trying to run component tests on a PWA made with Vue 2 and Webpack. When I try to run them I get an error saying process is not defined and this prevents me from doing the tests I want.error description The dependencies that my project has are the following:

"dependencies": {
    "compressorjs": "^1.1.1",
    "dotenv": "^16.0.3",
    "jquery": "^3.4.1",
    "lodash": "^4.17.21",
    "npm": "^6.10.0",
    "register-service-worker": "^1.5.2",
    "vue": "^2.6.14",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.12.16",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.21.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "^3.1.1",
    "@vue/cli-service": "~5.0.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "copyfiles": "^1.2.0",
    "css-loader": "^6.7.3",
    "cypress": "^12.11.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.1.6",
    "vue-loader": "^15.10.1",
    "vue-template-compiler": "^2.7.14",
    "web-push": "^3.3.3",
    "webpack": "^5.80.0",
    "workbox-cli": "^3.5.0"
  }

My webpack config file looks like this:

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: ["@babel/polyfill", "./app.vue"],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

My cypress config file looks like this:

const { defineConfig } = require("cypress");
const webpackConfig = require('./src/webpack.config');

module.exports = defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "webpack",
      webpackConfig
    },
  },
});

And my test file looks like this:

import Loading from './Loading.vue'

describe('<Loading />', () => {
  it('renders', () => {
    cy.mount(Loading)
  })
})

I suppose it is a conflict between dependencies or a problem with some loader library.

I tried to implement all the solutions proposed in forums but none of them worked for me. I also created a new project with vue 2 and the tests ran perfectly, but I couldn't find what is the reason for the problem.

Mike G · Answer 1 · 2023-05-03T20:47:33.307

This looks like a result of SSR compilation, since process is a node object and does not exist in the browser (where the component test is compiling).

I guess you could patch it in to the test

import Loading from './Loading.vue'

describe('<Loading />', () => {
  it('renders', () => {
    window.process = {
      env: {
        VUE_APP_FIREBASE_API_KEY: Cypress.env('VUE_APP_FIREBASE_API_KEY')
      }
    }
    cy.mount(Loading)
  })
})

and you would have to set up the firebase key in one of the ways described here Environment Variables.

Or follow this answer How can I specify .env file to use for my dev server when running cypress tests? to copy VUE_APP_FIREBASE_API_KEY into the Cypress.env() scope.

Cypress component test throws "process is not defined"

1 Answers1