setting locale in jest test environment is not working correctly

[r-kober]

Reporting a bug?

in Jest with testing-library the changing of the language does not really work. Only the first call to change this.$i18n.locale changes the locale actually and it stays that way for the following tests in which the locale should be changed.
If you try the same in the browser everything works fine.

Expected behavior

If you change $i18n.locale or i18n.global.locale it should change the locale in a jest environment everytime it is called.

Reproduction

https://github.com/r-kober/vue-i18n-next-jest-bug

System Info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
    Memory: 135.39 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    npm: 8.18.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.6.1
  npmPackages:
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-unit-jest: ~5.0.0 => 5.0.8 
    @vue/cli-service: ~5.0.0 => 5.0.8 
    @vue/test-utils: ^2.0.0-0 => 2.0.2 
    @vue/vue3-jest: ^27.0.0-alpha.1 => 27.0.0 
    vue: ^3.2.13 => 3.2.38 
    vue-i18n: ^9.2.2 => 9.2.2

Screenshot

No response

Additional context

The error came somewhere between Version 9.2.0-beta.34 and 9.2.0-beta.35, because in beta 34 it worked and also in 9.1.0.

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazupon]

Thank you for your reporting!

This is weird behavior...
I'll try to find out cause, and we will try to fix, if we will be able to find out.

[ivolkoff]

@r-kober You can try this.

import Form from './Form.vue';

export const i18n = createI18n({
  // set legacy to false
  legacy: false,
});

config.global.plugins = [i18n];

describe('Mounted Form', () => {
  test.each(['en', 'ru', 'uk'])('renders correctly %s', locale => {
    // set locale
    i18n.global.locale.value = locale;
    const wrapper = mount(Form);
    expect(wrapper.element).toMatchSnapshot();
  });
});

[mdoesburg]

@kazupon I can confirm that this is also an issue when using vitest.

It seems that doing this only works the first time:

i18n.global.locale.value = locale;

[nagisaando]

I am having the same issue with vitest + testing library.
Here is the repo. https://github.com/nagisaando/vueI18n-test-problem

Let me know if I need to submit more info!

[sronveaux]

Hi @kazupon and first thanks for this fantastic package so many people use !

I encounter the exact same problem here with an app using Karma as a test runner with Webpack under the hood.
Karma runs the unit tests inside a real browser compared to Jest or Vitest and the problem is exactly the same ! Only the first change of locale is working...

I was wondering, as some time has passed since this issue was open, whether you had some time to investigate and/or have found what could be the cause of this problem...

Many thanks in advance for keeping us updated on this one.

[ben-hamel]

I believe the issue is due to Vue Testing Library(VTL). I've submitted an issue on their repo with a repo showing Vue utils working in similar tests - testing-library/vue-testing-library#318

Global translations seem to work in VTL, but local scope definitely has an issue.

[sronveaux]

Hi @ben-hamel,

Unfortunaly, I also encounter the problem with VTU as I don't use VTL personally.

The way I implemented it on my side was to create an i18n instance with legacy: false and globalInjection: true then assign it to VTU config.global.plugin. That way it is available inside all tested components. (Note that I tried many variations with global translations, local translations, getting the reference with useI18n and always finish with the same problem...)
With this setup, I can change locale as much as I want BUT only in a single test. All the following tests will keep the locale fixed...

The only working way I've found is to recreate a new i18n instance before each test and associate it to global.plugins when mounting the component to test. However this would mean changing calls to mount or shallowMount in every file which is not very clever...

[ben-hamel]

Yeah, I'm unsure if there's difference due to mine being a Vitest setup. But you can check my repo and see translations are testing correctly with VTU. But with VTL I get the first test translating and then stops afterwards, but only for the local scoped translations.

[morcth]

I experienced the same with Vue Testing Library.

i18n.global.locale.value = language does not change the value correctly with a .each type test. Vitest.

If the each is the only test run and en in the first language tested, it works if there are 2 languages being tested.

If I run a test before the each test that also accesses locale, then the each will fail.

Was able to make it work with Vue Test Utils.

vue-i18n v9.1.10 works fine by the way. Not sure if that is the latest version that works though.