"Your locale has not been found" console warning when using @testing-library/react
- Dominant language
- JavaScript
- Stars
- 48.7k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
I am using dayjs on my project and everything works fine, both locally and on prod, so there are no actual functional problems. However, when I run my tests (I am using `@testing-library/react`), I keep getting the following `console.warn` every time I test a component that uses dayjs:
```typescript
Your locale has not been found.
Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale
Or you forget to import the locale with `require('dayjs/locale/{localeUsed}')`
fallback on English locale
```
I am also using `i18next`, and my project uses `fr` and `en` locales. Is there any config that I am missing for `dayjs`?
For instance, here is my `TimePicker` component and its `TimePicker.spec` test file that I am getting warnings from:
**_TimePicker.tsx_**
```typescript
import { useTranslation } from 'react-i18next';
import { UseFormRegisterReturn } from 'react-hook-form';
import dayjs, { Dayjs } from 'dayjs';
import fr from 'dayjs/locale/fr';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { LocalizationProvider, TimePicker as MUITimePicker } from '@mui/x-date-pickers-pro';
import { CalendarTheme } from '@layout/CalendarTheme/CalendarTheme';
type TimePickerProps = {
onChange: (time: Date) => void;
disabled?: boolean;
minutesStep?: number;
register?: UseFormRegisterReturn;
value?: Date;
};
export const TimePicker = ({
onChange,
disabled,
value,
minutesStep,
register
}: TimePickerProps) => {
const { t, i18n } = useTranslation('pages');
const locale = i18n.language === 'fr' ? fr : '';
const handleChange = (newValue: Dayjs | null) => {
onChange(dayjs(newValue).toDate());
};
return (
);
};
```
**_TimePicker.spec.tsx_**
```typescript
import { render } from '@testing-library/react';
import { TimePicker } from './TimePicker';
jest.mock('react-i18next', () => ({
useTranslation: () => ({
i18n: {
language: 'fr'
},
t: (str: string) => (str === 'common.timeFormat' ? 'HH:mm' : str)
})
}));
describe('TimePicker component', () => {
it('should render correctly', () => {
const props = {
onChange: jest.fn(),
testId: 'time-picker',
disabled: true
};
const { getByTestId } = render();
expect(getByTestId('time-picker')).toBeInTheDocument();
});
});
```
**Expected behaviour**
No console warnings when using `@testing-library/react`.
**Information**
- Day.js Version 1.11.7
Contributor guide
Research direction
Start with the provided TimePicker.tsx and TimePicker.spec.tsx, then reproduce the warning in the shown @testing-library/react test. Check how the French locale is passed to AdapterDayjs and how the test environment initializes it. Done means the component test runs without the reported console warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- localization, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100