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

[nogic1008]

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]

Thank you for your feedback!

I've checked your sample repo.
I have also published vue-i18n-jest, but that package is still incomplete.
I will transfer my vue-i18n-jest to intlify, where I will publish it as an official tool chain vue-i18n package under the name @intlify/vue-i18n-jest.

If you're interested in contributing, could you send me a PR for that package?

BTW, As an aside, vue-jest was supposed to support <i18n> custom blocks by default. However, I suggested custom processors to the vue-jest team and they had dropped it.
https://github.com/vuejs/vue-jest/pull/227

[kazupon]

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

You can send PR! :)

[nogic1008]

@kazupon
Thank you for your quick response.

What should I do for vue-i18n-jest?
Now, it is replacement for vue-jest, but I expect it to be a vue-jest plugin.

[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).

[nogic1008]

[email protected] has released, so I close this issue. Thank you!