using esbuild

[Ti-webdev]

I found a way to run @vue/vue2-jest with esbuild

jest.config.js:

const esJest = require('./esJest.js')

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.js$': './esJest.js',
    '^.+\\.vue$': '@vue/vue2-jest'
  },
  globals: {
    'vue-jest': {
      transform: {
        'js': esJest
      }
    }
  },
}

esJest.js:

const path = require('path')
const { transformSync } = require('esbuild')
const loaders = ['js', 'jsx', 'ts', 'tsx']
const target = `node${process.versions.node}`

exports.process = function (code, sourcefile) {
  const extname = path.extname(sourcefile)
  const loader = loaders.find((x) => `.${x}` === extname) || 'js'
  const options = {
    target,
    loader,
    sourcefile,
    format: 'cjs',
    sourcemap: 'external',
  }
  return transformSync(code, options)
}

but we still have dependencies to babel from @vue/vue2-jest as default...

[last-partizan]

@lmiller1990 please, take a look at this.

Could you add support for esbuild into vue-jest? it should speed up tests significantly.

If you need help, with some guidance i can create PR to adress this issue.

[lmiller1990]

Wow, neat.

This transformer is really coupled to babel + typescript for preprocessing. This would be a great feature, but I think we will need to reorganise things quite significantly to support this feature. If you'd like to take a go, that'd be great - if we are making big changes, we might want to plan it a little.

Also, is the example in the OP going to use JS for the code in <script> or only for non vue files?

[last-partizan]

I'm looking at usage of babel-jest in packages/vue-jest.

lib/transformers/typescript.js
2:const babelJest = require('babel-jest').default
30:      : babelJest.createTransformer({ inputSourceMap })

lib/index.js
2:const babelJest = require('babel-jest').default
13:        babelJest.createTransformer().getCacheKey(fileData, filename, {

lib/process.js
13:const babelTransformer = require('babel-jest').default
24:    return transformer || babelTransformer.createTransformer()

Looks like lib/process.js and lib/transformers/typescript.js is already supports swapping transformer, that's good.

Am i understanding correctly, if i configure https://github.com/aelbore/esbuild-jest, it will be used as transformer here?

---

The only one left is lib/index.js, but i do not unerstand what's happening here.

const crypto = require('crypto')
const babelJest = require('babel-jest').default
module.exports = {
  process: require('./process'),
  getCacheKey: function getCacheKey(
    fileData,
    filename,
    { config, configString, instrument, rootDir }
  ) {
    return crypto
      .createHash('md5')
      .update(
        babelJest.createTransformer().getCacheKey(fileData, filename, {
          config,
          configString,
          instrument,
          rootDir
        }),
        'hex'
      )
      .digest('hex')
  }
}

Babel transformer are used only to get cache key?

[lmiller1990]

Am i understanding correctly, if i configure https://github.com/aelbore/esbuild-jest, it will be used as transformer here?

Yes, I think so - you should be able to tell esbuild-jest to use vue-jest for .vue files.

The only one left is lib/index.js, but i do not understand what's happening here.

getCacheKey is just an optimization, from the docs:

Though not required, we highly recommend implementing getCacheKey as well, so we do not waste resources transpiling when we could have read its previous result from disk. You can use @jest/create-cache-key-function to help implement it.

Jest will automatically use babel-jest, unless you've configured other transformers, in which can you need to automatically enable it. Docs. But yes, I think we are only using for getCacheKey, from what I can see (it's been a while since I worked on this code base).

Thanks for picking this up - exciting to see some fresh updates to this repo, which hasn't had much love recently.