"Unexpected token ." when running React-DateRange-Picker in unit tests

[juanruben]

Hi. Thank you for this nice package

I defined this wrapper to set some default props

RangeDatePicker.tsx

import { Typography } from '@mui/material';
import DateRangePicker, { DateRangePickerProps } from '@wojtekmaj/react-daterange-picker';
import { useTranslation } from 'react-i18next';
import './styles.css';

export interface Props extends DateRangePickerProps {
  value: string | Date | (string | Date)[];
}

export const RangeDatePicker = ({ value, ...rest }: Props) => {
  const { t, i18n } = useTranslation();

  return (
    <Typography sx={styles.container} component="div">
      <DateRangePicker
        dayPlaceholder={t('calendar.placeholderDay', 'dd')}
        monthPlaceholder={t('calendar.placeholderMonth', 'mm')}
        yearPlaceholder={t('calendar.placeholderYear', 'yyyy')}
        showLeadingZeros
        className="custom-date-range-picker"
        calendarClassName="calendar-style"
        rangeDivider=""
        minDetail="month"
        value={value}
        format="y/MM/dd"
        locale={i18n.language}
        {...rest}
      />
    </Typography>
  );
};

const styles = {
  container: {
    '.calendar-style .react-calendar__tile--active': {
      backgroundColor: 'primary.main',
    },

    '.calendar-style .react-calendar__tile--active:enabled:hover, .calendar-style .react-calendar__tile--active:enabled:focus': {
      backgroundColor: 'primary.main',
    },
  },
};

When try to create a simple test or any test on a parent component it fails with this

SyntaxError: Unexpected token '.'
 ❯ Object.compileFunction node:vm:360:18
 ❯ Object.<anonymous> ../../node_modules/@wojtekmaj/react-daterange-picker/dist/entry.js:8:1

This is the test file

RangeDatePicker.test.tsx

import { RangeDatePicker } from './RangeDatePicker';
import { render, screen } from '@testing-library/react';

describe('RangeDatePicker', () => {
  it('should render ok', () => {
    render(<RangeDatePicker value={new Date()} />);
    screen.debug();
  });
});

Any idea about what could be happening?

[wojtekmaj]

The issue is that the default import imports CSS file, and your testing setup doesn't know how to handle that. So, on first class, .react-calendar, it crashes.

• Mock css files using moduleNameMapper (if you use Jest)
• Use entry.nostyle instead of normal entry to skip importing CSS file

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.