Vite compatible Jest preset

[softbeehive]

Is your feature request related to a problem? Please describe.

I'm migrating a large codebase to Vue 3 + Vite. The project contains tests I'd like to reuse. But due to the limited ESM support Jest throws an error every time import.meta.env is used in components, vuex actions, api helpers. Apart from that experience is pretty smooth.

For example (in tests):

timeout: import.meta.env.VITE_API_CONFIG_TIMEOUT
                      ^^^^
SyntaxError: Cannot use 'import.meta' outside a module

Describe the solution you'd like

I'd like to use process.env until ESM support in Jest is complete. Allowing environment variables with VITE_ prefix. As far as I can see in config.ts, the choice is made in favour of import.meta. Would you consider adding a config flag that will allow env customization?

Describe alternatives you've considered

Snowpack, because similar issue has already been addressed
FredKSchott/create-snowpack-app#120

jest.config.js

module.exports = {
  coverageDirectory: 'coverage',
  moduleFileExtensions: ['vue', 'js', 'json'],
  moduleNameMapper: {
    '^/@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\js$': 'babel-jest',
  },
}

babel.config.js

module.exports = {
  env: {
    test: {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: 'current',
            },
          },
        ],
      ],
    },
  },
}

P.S. I'm happy to provide a reproduction if needed

[yyx990803]

This is not really a Vite issue - since when running your Jest tests, Jest directly loads and processes your source code without Vite getting involved at all.

What you need is adding a babel plugin like this one (you may need to tweak it a bit) to your babel config.

Alternatively, open an issue at Jest to ask them to support this by default.

[yyx990803]

On another thought, there could probably be an official Jest preset to make Jest vite-compatible.

[padcom]

Honestly, the only thing stopping me from widely adopting Vite as the build tool is the lack of templates with unit tests and end to end tests. I've been trying to get something done myself but apparently I don't know the area good enough to accomplish that. I suppose I am not alone in it.

Having the option to scaffold a project with unit tests using either mocha+chai or jest and e2e tests with cypress or some selenium-based library would make it far easier to make Vite the choice for a new project.

[padcom]

It'd be even cooler if those could be plugins that one would need to install and those plugins would then add functionality. I've been dying to get that kind of modularity for ages and nowadays it is only possible with vue-cli managed projects - hence I'm sticking to that.

[zxwild]

It seems I've found at last the plugin which is able to implement import.meta, it's babel-plugin-transform-import-meta.
So all is needed in my case is:

1. npm install --save-dev babel-plugin-transform-import-meta
2. babel.config.js modification

module.exports = {
  plugins: [
    'babel-plugin-transform-import-meta',
  ],
  // or to:
  // env: { test: plugins: [...] }
}

Previously I had:

ERROR: unknown: import.meta may appear only with 'sourceType: "module"' (110:20)
> 110 |   createWebHistory)(import.meta.env.BASE_URL),

Now all is ok.

[threepointone]

Keeping an eye on this, feel like it's one of the last big pieces for vite to embrace. Happy to contribute too. I'll have a go at making a jest preset soon, including their fancy hoisting plugin.

[frandiox]

I could make it work with the following inline plugin in babel.config.js:

// Only used by Jest
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { useBuiltIns: 'entry', corejs: '2', targets: { node: 'current' } },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    function () {
      return {
        visitor: {
          MetaProperty(path) {
            path.replaceWithSourceString('process')
          },
        },
      }
    },
  ],
}

It basically replaces import.meta.env with process.env. Note it doesn't populate process.env.MODE.

Also, make sure to tell vue-jest to use Babel:

// jest.config.js
globals: {
  'vue-jest': {
    babelConfig: true,
  },
},

And, in case you are testing different configurations, run Jest with --no-cache parameter to avoid wasting hours 🤦

[aelbore]

Honestly, the only thing stopping me from widely adopting Vite as the build tool is the lack of templates with unit tests and end to end tests. I've been trying to get something done myself but apparently I don't know the area good enough to accomplish that. I suppose I am not alone in it.

Having the option to scaffold a project with unit tests using either mocha+chai or jest and e2e tests with cypress or some selenium-based library would make it far easier to make Vite the choice for a new project.

@padcom i created a vite-plugin that can test your component with mocha+chai+puppeteer (its compatible with vue, react and lit-element component)
you can check this repo

https://github.com/aelbore/vite-plugin-test

hope you can give any feedback :)

[padcom]

@aelbore Thanks! I've checked it and seems to be working! Thank you!

However, I am mostly using Jest for my tests. Would you be able to create a similar plugin just for use with Jest?

[bartenra]

I got it to work by just following the Jest docs.

I just had to install and configure Babel:

https://jestjs.io/docs/en/getting-started

For ESM module support, run with

NODE_OPTIONS=--experimental-vm-modules npx jest

as described here: https://jestjs.io/docs/en/ecmascript-modules