how to mock i18next module in jest

Question

I'm setting up test environment for existing Vue project, and I decided on jest with vue-test-utils.

Everything is installed and in place, however when I import component I wish to test in .test.js file, and add component to test utils like so:

let wrapper = shallow(Home)

test suite crashes with error: TypeError: Cannot read property 'i18next' of undefined.

I decided to mock i18next module but I have problems with mocking. My mock looked like this:

jest.mock('i18next', () => ({
  init: () => {},
  use: () => {},
  t: k => k
}));

but I always get error:

TypeError: Cannot read property 'init' of undefined

      35 |
      36 | i18next
    > 37 |      .use(Locize)
      38 |      .init(i18nextOptions);
      39 |
      40 | export default new VueI18Next(i18next);

Can somehow explain the proper way to mock i18next module so my wrapper object could initialize ? Also if I'm doing something else wrong, please point me in the right direction. Below is the complete test case:

import { shallow, mount, createLocalVue } from '@vue/test-utils';
import Home from '../../src/app/pages/home/index/index.vue';

jest.mock('i18next', () => ({
  init: () => {},
  use: () => {},
  t: k => k
}));

describe('Home Component', () => {

  let wrapper;

  beforeEach(() => {
    wrapper = shallow(Home);
  });

  it('something', () => {
    console.log('bleh');
    expect(wrapper.contains('div')).toBe(true);
  });

});

Thanks.

David Schumann · Accepted Answer · 2018-06-25 12:21:26Z

3

The error Cannot read property 'init' of undefined happens on the result of i18next.use(Locize) and not on the i18next object. Try updating your mock to:

jest.mock('i18next', () => ({
  use: () => {
    init: () => {
      t: k => k,
      on: () => {}
    }
  }
}));

I used this file as reference to this mock: panter/vue-i18next/src/i18n.js

edited Jun 25, 2018 at 12:21

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Feb 14, 2018 at 14:44

daniloisr

1,36511 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Perp Over a year ago

jest.mock('i18next', () => ({ use: () => { return { init: () => { } }; }, t: k => k })); This worked partially to get another error message:

TypeError: this.i18next.on is not a function        38 |      .init(i18nextOptions);       39 |     > 40 | export default new VueI18Next(i18next);       41 |

Perp Over a year ago

Even if I add on and t functions inside init, same error persist as in my comment above.

daniloisr Over a year ago

Try passing your i18n config to the shallow method, it should be something like this: shallw(Home, i18n), I gave a similar answer to this question: stackoverflow.com/a/48792562/1042324

Perp Over a year ago

Well... , I'm not sure. When I add it to shallow/mounted, in my karma+jasmine setup it doesn't do anything and still says i18next is not defined. In Jest though, it doesn't complain about i18next, but throws bunch of ReferenceError: sessionStorage is not defined, errors. So even basic assertion like : expect(2+2).toBe(4); is not working...

Collectives™ on Stack Overflow

how to mock i18next module in jest

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related