Cannot use vue-i18n plugin with current rendering API

[brennj]

The goal

I want to get i18n capabilities in my test using this library, with the popular community vue solution for i18n: vue-i18n.

The issue

In order to make i18n possible using that package, it is currently not possible as far as I can tell. The idea would be that you could pass it to the mountOptions (i.e. second argument of render function), it will not work because it depends on the localVue/Vue being available.

One may think, why not just use the third callback argument and register it there? Agree with you! But there is the problem that you must create the i18n like so in @vue/test-utils:

const localVue = createLocalVue();
localVue.use(VueI18n);
const i18n = new VueI18n({ locale: "en" });

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

The thing to note is that the i18n variable passed into mount. In the current setup of the function, it is impossible to pass this i18n variable in the second argument of render without having a localVue instance available.

Perhaps the third argument could be changed to return a value that is passed in as additional options so that they fall through to the mountOptions? i.e. I imagine passing it as:

import { render as r } from '@testing-library/vue';
import VueI18n from 'vue-i18n';

const messages = {
  en: {
    permission_groups_add_member: 'Add',
  },
};

export function render(ui, { ...opts } = {}) {
  return r(
    ui,
    {
      ...opts,
    },
    vue => {
      vue.use(VueI18n);
      const i18n = new VueI18n({ locale: 'en', messages });
      return { i18n };
    },
  );
}

[afontcu]

Hi, and thank you for filling in this issue!

In some of my projects I ended up mocking $t (as explained here). Would that work for you?

I even use Lodash' get method to actually load the real translation strings:

import get from 'lodash'
import locales from '@/assets/locales/es.json'

const {...} = render(Component, {
  mocks: {
    $t: msg => get(locales, msg)
  }
})

[brennj]

Mocking is definitely an option :) but I want to integrate it properly like I can with my i18n solution when using @testing-library/react. I need to be able to use $tc, etc.

[brennj]

Hi @afontcu I tried my hand at a PR for this, let me know if this would cause any consequences or if there's anything additional you think could be an issue?

[brennj]

Thanks for the merge on this, super delighted. 🔥

[afontcu]

Thank you for contributing!! 🎉