[feature request] add built-in <i18n> block processor for vue-jest

vue-jest supports to process custom block like <i18n> since v4.0.0-beta.3. But, to use it, We have to write our own processor for each project. In addition, we need to add some packages to interpret json5 and yaml.

Built-in custom block processor avoids this task.

Usage

jest.config.js

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

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)
  })
})

Sample

nogic1008/vue-jest-i18n

index.js

/**
  * 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
 */
export function process({ blocks, vueOptionsNamespace, filename, config }) {
  // ...
}

[kazupon]

@nogic1008 I’m very sorry for being so late in replying, due to development of vue-i18n-next. 🙇

If you still have motivation, can I ask you to send me a PR to the repo I have prepared? The repo I prepared has my code, but it’s fine to have it rewritten from full scratch. 🆗 https://github.com/intlify/vue-i18n-jest

The following documentation from vue-jest@v4 provides a custom processor. https://github.com/vuejs/vue-jest#supporting-custom-blocks

So it is not an official vue-jest plugin, but an official cusotom processor provided by vue-i18n (or intlify project).

[kazupon]

@nogic1008 I’ve just transferred. https://github.com/intlify/vue-i18n-jest

You can send PR! 😃