I am making unit tests with jest and react-testing-library for my frontend application which is done with React. My unit tests worked nicely before I added the internationalization with react-i18next -library. Now when I run the tests, it seems that it doesn't find/use the translation files and all places where there should read something, are left empty. I'm using the newest react version with hooks and instead of React.Component I am using this kind of "const-components":
const ComponentName = ({t}) => {
return(
<p>{t('example')}</p>
)}
export default ComponentName;
The internationalization works perfectly in the actual page but just that the unit tests fail due to not using the translation-file so I think the problem is with correctly mocking the translation files. I am only finding some suggestion solutions for the older react using this.variableName -type of solutions, which however doesn't help me much.
I have tried to mock it with jest.fn(), but I am not sure which function is the one, which I should mock and how to utilize the useTranslation() -function correctly from the tests.
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { render } from '@testing-library/react';
import ComponentName from './ComponentName';
import '../locales/i18n';
test('renders all documents in the list', () => {
const mockUseTranslation = jest.fn();
const { t, i18n } = mockUseTranslation();
// const t = jest.fn();
const c = render(<ComponentName t={t} />);
expect(c.getByText('Translation File Title')).toBeDefined();
expect(
c.getAllByText(
'Lorem ipsum'
).length
).toBe(3);
});
Error message: Unable to find an element with the text: Translation File Title. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
So in short: the place, which should contain certain text is now totally empty.
Aucun commentaire:
Enregistrer un commentaire