intlify / vue-i18n-jest

:globe_with_meridians: vue-jest wrapper for i18n custom blocks

🌐 vue-i18n-jest

vue-jest transformer for i18n custom blocks

⚠️ NOTICE

v2.x or later is for vue-i18n-next (Vue 3.x)

If you want to use for [email protected] (Vue 2.x), use the v1.x

This transformer is for [email protected]

💿 Installation

npm

npm install --save-dev vue-i18n-jest

yarn

yarn add -D vue-i18n-jest

🚀 Usages

To define vue-i18n-jest as a transformer for your .vue files that have i18n custom blocks, map them to the vue-i18n-jest module.

if you've already setup vue-jest, You can change it as follows:

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

📜 Changelog

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

✅ TODO

Managed with GitHub Projects

©️ License

MIT

vue-i18n-jest's Issues

Accept new versions of vue-jest for vue 2

Hi! vue-jest 4.0.1 has been released, and the current peerDep definition of -beta.3 does not include this patch version.

Also, @vue/vue2-jest has been released, and I think the following versions should be supported, too: ^27.0.0 || ^27.0.0-alpha.

I was about to open a PR but I'm not sure how to define all the 4 versions – if needed?

👋

Does it support Vue3?

Hi, I'm not sure if this place is the appropriate place to ask but I think it says there is version 2 for Vue 3, and is it available? I can not install vue-i18-jest since it can not resolve dependency of vue

npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5" from [email protected]

I am using

"vue": "^3.2.31",
"vue-i18n": "^9.1.10",
"vite": "^2.5.4",
"vitest": "^0.15.2",

[@vue/test-utils] i18n property translations of SFC not being used in unit test

Reproduction Link

https://codesandbox.io/s/2z362mk09r?module=%2Fsrc%2FApp.test.js

Steps to reproduce

You'll see in App.vue that $t('greeting') is being used to display a message to the user, where greeting is defined in i18n of the SFC.

What is Expected?

It works as expected on the browser, this should also happen on the test.

<template>
  <div>{{ $t("greeting") }}</div>
</template>

<script>
export default {
  i18n: {
    messages: {
      en: {
        greeting: "Hello World!"
      }
    }
  }
};
</script>

What is actually happening?

With Jest and @vue/test-utils, it will only show the translation key.

expect(received).toEqual(expected)

Expected value to equal:
  "Hello World!"
Received:
  "greeting"

   9 | it("Should translate", () => {
  10 |   const wrapper = mount(App, { i18n, localVue });
> 11 |   expect(wrapper.text()).toEqual("Hello World!");
  12 | });

Not sure whether this is for @eddyerburgh or you guys, whatever suits! Hope it makes sense.

Test Jest and tag <i18n> inside a component

Good afternoon, thanks for your work.

I have a problem. Can't test components when there is an tag inside the component.

I example example:
https://github.com/ivolkoff/vue-i18n-next-jest-bug

Run test:
https://github.com/ivolkoff/vue-i18n-next-jest-bug/blob/main/src/tests/unit/App.spec.js

I expect that the text will change depending on the locale, but it remains the same, since it does not find the block with the translation.
https://github.com/ivolkoff/vue-i18n-next-jest-bug/blob/main/src/tests/unit/__snapshots__/App.spec.js.snap

the text transformation plugin used to help me, but now it is not supported
https://github.com/intlify/vue-i18n-jest

Is there a way to set up a test?

translation files referenced by src attribute are not supported

Hello,

I use a common dictionary for translations a lot like this:

<i18n lang="yaml" src="../locales/common.yaml"></i18n>

However, it is not supported by vue-i18n-jest which assumes that the translation is inserted directly into the i18n element.
Could you please add the support?

Best regards
Beda

change to monorepo structure?

vue-i18n-jest should be supported for Vue 2 / Vue 3 and jest 26 / jest 27 like vue-jest.

Originally posted by @kazupon in #38 (comment)

add vue-cli examples

• babel only
• no babel
• typescript only
• typescript & babel

revise docs

import of translation files using @ in path is not supported

Hello,

using @ in the path when including translation files like this:

<i18n lang="yaml" src="@/locales/common.yaml"></i18n>

is not supported, even though it is completely legitimate.

Would it be possible to add support for this?

Thanks
Beda

Custom transformer (this project) never appears to run

Hi,
I have a vue2 project that I'm trying to run tests on and I use the following:

Jest 28
@vue/vue2-jest@28
[email protected]
vue-i18n@8
@vue/[email protected]

I have added to my jest.config.js the following:

 globals: {
    '@vue/vue2-jest': {
      transform: {
        'i18n': 'vue-i18n-jest'
      }
    }
  },
  transform: {
     '^.+\\.vue$': '@vue/vue2-jest'
  }

note: I also tried the vue-jest key in the globals section with the same results.

My tests fail with the following error:

TypeError: Cannot read properties of undefined (reading 't')

line in question:

data() {
    headers: [
      {
         text: this.$i18n.t('admin.users.headers.name'),

My test render call:

it('renders', () => {
  const wrapper = shallowMount(UserList, {
    Vue,
    propsData: {
      users,
    },
  });

Thank you for any guidance.

support preset

ref: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest/presets

contribution guide

add .github directory

support for vue-jest@v5

scopeID sanitaize

for rollup building