latest
legacy v9
Testing
For testing purpose of your component you should export the pure component without extending with the withTranslation hoc and test that:
1
export MyComponent;
2
export default withTranslation('ns')(MyComponent);
Copied!
In the test, test the myComponent export passing a t function mock:
1
import { MyComponent } from './myComponent';
2
​
3
<MyComponent t={key => key} />
Copied!
1
const tDefault = (key) => key;
2
const StubbableInterpolate = mayBeStubbed(Interpolate);
3
const stubInterpolate = function () {
4
stub(StubbableInterpolate, (props, context) => {
5
const t = (context && context.t) || tDefault;
6
return (<span>{t(props.i18nKey)}</span>);
7
});
8
};
Copied!
Or mock it like:
1
jest.mock('react-i18next', () => ({
2
// this mock makes sure any components using the translate HoC receive the t function as a prop
3
withTranslation: () => Component => {
4
Component.defaultProps = { ...Component.defaultProps, t: () => "" };
5
return Component;
6
},
7
}));
Copied!
Or, when using the
useTranslation hook instead of withTranslation, mock it like:1
jest.mock('react-i18next', () => ({
2
// this mock makes sure any components using the translate hook can use it without a warning being shown
3
useTranslation: () => {
4
return {
5
t: (str) => str,
6
i18n: {
7
changeLanguage: () => new Promise(() => {}),
8
},
9
};
10
},
11
}));
Copied!
You can find a full sample for testing with jest here: https://github.com/i18next/react-i18next/tree/master/example/test-jest​
Testing without stubbing
Alternatively, you could also test I18next without stubbing anything, by providing the correct configuration and fully wrapping your container in the provider.
Example configuration for testing
1
import i18n from 'i18next';
2
import { initReactI18next } from 'react-i18next';
3
​
4
i18n
5
.use(initReactI18next)
6
.init({
7
lng: 'en',
8
fallbackLng: 'en',
9
​
10
// have a common namespace used around the full app
11
ns: ['translations'],
12
defaultNS: 'translations',
13
​
14
debug: true,
15
​
16
interpolation: {
17
escapeValue: false, // not needed for react!!
18
},
19
​
20
resources: { en: { translations: {} } },
21
});
22
​
23
export default i18n;
Copied!
Example test using this configuration
1
import React from 'react';
2
import { Provider } from 'react-redux';
3
import { mount } from 'enzyme';
4
import { I18nextProvider } from 'react-i18next';
5
import configureStore from 'redux-mock-store';
6
import ContactTable from './ContactTable';
7
import actionTypes from '../constants';
8
import i18n from '../i18nForTests';
9
​
10
const mockStore = configureStore([]);
11
const store = mockStore({ contacts: [ ] });
12
​
13
it('dispatches SORT_TABLE', () => {
14
const enzymeWrapper = mount(
15
<Provider store={store}>
16
<I18nextProvider i18n={i18n}>
17
<ContactTable />
18
</I18nextProvider>
19
</Provider>
20
);
21
enzymeWrapper.find('.sort').simulate('click');
22
const actions = store.getActions();
23
expect(actions).toEqual([{ type: actionTypes.SORT_TABLE }]);
24
});
Copied!
As translations aren't provided,
this.props.i18n.language will be undefined. In case your application relies on that value you can mock resources by adding these lines to the object passed to init:1
i18n
2
.init({
3
...
4
fallbackLng: 'en',
5
resources: {
6
en: {},
7
de: {}
8
}
9
})
Copied!
Now in your component
this.props.i18n.language will return en.Last modified 1yr ago