feat!: support vue-jest@4

[nogic1008]

⚠️ This PR contains BREAKING CHANGE!! ⚠️

• Change this library to be treated as a vue-jest plugin
• Remove the feature to replace vue-jest@3

ref: kazupon/vue-i18n#984

Usage

jest.config.js

module.exports = {
  globals: {
    'vue-jest': {
      transform: {
        'i18n': require('vue-i18n-jest')
      }
    }
  }
}

component.vue

<i18n>
{
  "en": {
    "hello": "Hello, World"
  },
  "ja": {
    "hello": "こんにちは、世界"
  }
}
</i18n>

<template>
  <div>{{ $t('hello') }}</div>
</template>

component.test.js

import { createLocalVue, mount } from '@vue/test-utils'
import VueI18n from 'vue-i18n'

import Component from './component.vue'

const localVue = createLocalVue()
localVue.use(VueI18n)

describe('./component.vue', () => {
  test.each([
    ['en', 'Hello, World'],
    ['ja', 'こんにちは、世界']
  ])('locale %s renders "%s"', (locale, expected) => {
    const i18n = new VueI18n({ locale, silentFallbackWarn: true })
    const wrapper = mount(Component, { localVue, i18n })
    expect(wrapper.text()).toBe(expected)
  })
})

[kazupon]

@nogic1008 Thank you very much! That's great work! LGTM!

[kazupon]

@lmiller1990 From the perspective of vue-jest, if there's anything you'd like to see reviewed, I'd love to hear it! 🙏

[lmiller1990]

hm, @nogic1008 did you test this with vue-jest@4? I am guessing so?

[nogic1008]

@lmiller1990 Yes, I just pushed the e2e test against the latest vue-jest@4 (4.0.0-rc.1).

hm, @nogic1008 did you test this with vue-jest@4? I am guessing so?

[kazupon]

@lmiller1990 Thank you for your reviwing!

@nogic1008 Thank you very much for your contribution! so, since CI passed, I’ll merge this PR!

[kazupon]

I've just released v1.0.0! https://www.npmjs.com/package/vue-i18n-jest

@nogic1008 Thank you very much!

@lmiller1990 Thank you for your reviewing!

[nogic1008]

@kazupon Great Works!!! Thank you!!!!! I tried using it in my repo: nogic1008/nuxt-ts-template#350

Note

require('vue-i18-jest') causes error, so I used 'vue-i18n-jest' instead. I am investigating the cause of this. (probably not due to this package)

Error stack

    [vue-jest] Error: transformer must contain at least one process, preprocess, or postprocess method

      2 | import VueI18n from 'vue-i18n'
      3 | 
    > 4 | import Environment from '~/pages/environment.vue'
        | ^
      5 | 
      6 | const localVue = createLocalVue()
      7 | localVue.use(VueI18n)

      at error (node_modules/vue-jest/lib/utils.js:117:9)
      at getCustomTransformer (node_modules/vue-jest/lib/utils.js:107:5)
      at module.exports (node_modules/vue-jest/lib/process-custom-blocks.js:24:25)
      at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:103:30)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:569:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:608:25)
      at Object.<anonymous> (__tests__/pages/environment.test.ts:4:1)

jest.config.js

  globals: {
    'vue-jest': {
      transform: {
        i18n: require('vue-i18n-jest'), // cause error!
        i18n: 'vue-i18n-jest' // success
      }
    }
  },

[kazupon]

@nogic1008 Thank you for your feedback! I've updated README. :)