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

[xdebbie]

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:

     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

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 (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
      <CalendarTheme>
        <MUITimePicker
          {...register}
          onChange={handleChange}
          value={dayjs(value)}
          format={t('common.timeFormat')}
          disabled={disabled}
          ampm={false}
          minutesStep={minutesStep}
        />
      </CalendarTheme>
    </LocalizationProvider>
  );
};

TimePicker.spec.tsx

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(<TimePicker {...props} />);

    expect(getByTestId('time-picker')).toBeInTheDocument();
  });
});

Expected behaviour No console warnings when using @testing-library/react.

Information

• Day.js Version 1.11.7

[borisyordanov]

+1

[borisyordanov]

@iamkun can this issue be triaged please?