axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
126 stars 18 forks source link

Unhandled Rejection in datepicker using vitest with react testing library #2433

Open ElPequenoMarkus opened 1 year ago

ElPequenoMarkus commented 1 year ago

I recently implemented vitest in our project together with React testing library and started writing tests for our components. While using the datepicker i get a unhandled rejection error from vitest just implementing it.

Expected Behavior

No error when just rendering the component

Current Behavior

ReferenceError: e is not defined
 ❯ node_modules/@axa-ch/datepicker/lib/index.react.js:7:1972
     54|             `:""}
     55|         ${this.open&&!o||!this.inputfield?e`
     56|               <div class="m-datepicker__wrap js-datepicker__wrap">
       |                                  ^
     57|                 <div class="m-datepicker__article">
     58|                   <div class="m-datepicker__dropdown-wrap">
 ❯ HTMLElement.render node_modules/@axa-ch/datepicker/lib/index.react.js:8:17627
 ❯ HTMLElement.update node_modules/lit-element/src/lit-element.ts:160:24
 ❯ HTMLElement.performUpdate node_modules/@lit/reactive-element/src/reactive-element.ts:1331:14
 ❯ node_modules/@axa-ch/datepicker/lib/index.react.js:8:17215

Steps to Reproduce

Just run the tests with datepicker implemented

Implemented datepicker

export default function DatePicker({ value, label, allowedyears, invalid, invaliddatetext, onChange, required, onBlur }: CustomDatePickerProps) {
  const dateChange = (date: Date) => {
    onChange(moment(date));
  };

  return (
    <AXADatePicker
      label={label}
      inputfield
      required={required}
      invalid={invalid}
      invaliddatetext={invaliddatetext}
      date={value?.toDate()}
      onDateChange={dateChange}
      onBlur={onBlur}
      allowedyears={allowedyears}
    />
  );
}

Implemented with Formik as a component:

<Field
    name='employmentStart'
    as={Datepicker}
    required
    inputfield
    invalid={touched.employmentStart && !!errors.employmentStart}
    invaliddatetext={errors.employmentStart}
    label={t('SingleEntry.PersonalData.Label.EmploymentStart')}
    allowedyears={[allowedEmploymentYears]}
    onChange={(e: Moment) => {
      setFieldTouched('employmentStart', true, true);

      setFieldValue('employmentStart', e);
    }}
    onBlur={() => {
      setFieldTouched('employmentStart', true, true);
    }}
  />

example test:

it('should enable next-button if data is valid', async () => {
      const { getByTestId } = renderWithRouter(
        <QueryClientProvider client={queryClient}>
          <PersonalDataStep />
        </QueryClientProvider>,
      );

      await waitFor(() => {
        const submitButton = getByTestId('submit-button');

        expect(submitButton).not.toBeDisabled();
      });
    });

Context (Environment)

"vitest": "^0.29.3" "@vitest/ui": "^0.29.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "jsdom": "^21.1.1",