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

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
• [X] 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!