iamkun / iamkun/dayjs

"Your locale has not been found" console warning when using @testing-library/react

Open
#2,356 2 comments 6 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.