v.27.0.0-alpha.2 - TypeError: Jest: a transform must export a `process` function.

[michealroberts]

According to the ts-jest team, this way (https://github.com/vuejs/vue-jest/blob/v27.0.0-alpha.2/packages/vue3-jest/lib/index.js#L3) of exporting transformer no longer works with Jest 27.

The right way to export transformer is show here: https://github.com/kulshekhar/ts-jest/blob/master/src/index.ts :

import { TsJestTransformer } from './ts-jest-transformer'

export default {
  createTransformer: (): TsJestTransformer => new TsJestTransformer(),
}

[michealroberts]

cc. @lmiller1990 Not sure how I specifically pin this to the v.27.0.0 alpha ...

[ahnpnl]

Also example from babel-jest https://github.com/facebook/jest/blob/master/packages/babel-jest/src/index.ts#L278

[michealroberts]

@ahnpnl I have one minor question - do I need to supply my own transformer here? Also, the README.md for this project makes brief mention of "writing a processor" about half way down:

Processors must return an object with a "process" method, like so...

module.exports = {
  /**
   * Process the content inside of a custom block and prepare it for execution in a testing environment
   * @param {SFCCustomBlock[]} blocks All of the blocks matching your type, returned from `@vue/component-compiler-utils`
   * @param {string} vueOptionsNamespace The internal namespace for a component's Vue Options in vue-jest
   * @param {string} filename The SFC file being processed
   * @param {Object} config The full Jest config
   * @returns {string} The code to be output after processing all of the blocks matched by this type
   */
  process({ blocks, vueOptionsNamespace, filename, config }) {}
}

Although, I'm not sure where or how or what I do to achieve this ...

[ahnpnl]

You can write your own Jest transformer if you want to process certain file extensions for Jest.

Regarding to the change of how to write a Jest transformer, it was a breaking change introduced in Jest 27.

You can either follow ts-jest example or babel-jest example to write your own transformer. The example from babel-jest is clear enough what an index.ts/index.js should contain.

[michealroberts]

@ahnpnl Hmmmm, I'm not really sure how to tackle this to be honest to even start with a PR.

[ahnpnl]

https://github.com/vuejs/vue-jest/blob/master/packages/vue3-jest/lib/index.js#L3 instead of

module.exports = {
   process: ...
   ...
}

should change to

const createTransformer = () => {
    process: ...
}

const transformer = {
  ...createTransformer(),
  createTransformer,
};

export default transformer;

This I copied from https://github.com/facebook/jest/blob/master/packages/babel-jest/src/index.ts#L278

[michealroberts]

@lmiller1990 Sorry to bother you again Lachlan ... do you have any opinions on the above issues I have?

[michealroberts]

Hi, this issue is still dangling without any comment from anyone in the core team of this package.

I'm a bit concerned, have I neglected to add additional configuration for Jest 27 or does this need patching by the vie-jest team?

[lmiller1990]

Hello, sorry about the slow reply.

I will take a look, but from what I can see, Vue CLI now works great with Jest 27: https://github.com/vuejs/vue-cli/releases/tag/v5.0.0-beta.4

Also, is there a way to reproduce the issue you are having? We have quite a lot of tests, including ts-jest like this project so if there is a problem, I'd expect something to be failing.

Are you using Vue 2 or Vue 3? I'm a bit confused. Happy to help, but going to need more clear instructions on the versions, what is not working, etc.

[blake-newman]

I'm also facing this issue

Related configuration:

 { 
    transform: {
      '^.+\\.vue$': '@vue/vue2-jest'
    },
    globals: {
      'vue-jest': {
        transform: {
          ts: require('babel-jest').default,
          tsx: require('babel-jest').default
        }
      }
    }
  }

When using custom transformers i could only get it to work when requiring the package. We use babel instead of ts-jest as we have custom babel plugins for transformation.

However when the tests run vue-jest is passed transform: { ts: { canInstrument: true }, tsx: { canInstrument: true } }.

This is using @vue/vue2-jest