React-testing-library: Fire change event doesn't work on inputs with type="date"

[jmeyers91]

• react-testing-library version: ^6.0.3
• react version: 16.8.2
• node version: 10.11.0
• npm version: 6.4.1

Relevant code or config:

test('Should be able to edit audit shift date', () => {
  const { container } = render(<AuditShiftForm />);
  const testValue = '03/29/2019';
  const input = getByTestId(
    container,
    'audit-date-input',
  ) as HTMLInputElement;

  fireEvent.change(input, { target: { value: testValue } });

  expect(input.value).toEqual(testValue);
});

What you did:

Trying to write a test that makes sure a date input is being updated properly.

What happened:

Jest fails the test with this output:

  ● components/AuditShiftForm › Should be able to edit audit shift date

    expect(received).toEqual(expected)

    Difference:

    - Expected
    + Received

    - 03/29/2019
    +

      21 |     });
      22 |
    > 23 |     expect(input.value).toEqual(testValue);
         |                         ^
      24 |   });
      25 |
      26 |   test('Should be able to listen for close-button clicks', () => {

      at Object.test (src/components/__tests__/AuditShiftForm.test.tsx:23:25)

Reproduction:

Here's a code sandbox for reproducing the issue. I added two tests: one that updates and checks a text input and another that updates and checks a date input. The text input test succeeds, but the date input test fails.

https://codesandbox.io/s/92pnxn5kro

Problem description:

It should be possible to fire change events against date inputs.

Suggested solution:

It looks like this library uses dom-testing-library to handle firing events. Let me know if I should post this in the dom-testing-library issues.

EDIT:

For now, my solution is to not use type="date" in test environments:

import styled from '../styled';
import Input from './Input';

const DateInput = process.env.NODE_ENV === 'test'
  ? Input
  : styled(Input).attrs({ type: 'date' })``;

export default DateInput;

[kentcdodds]

The problem is that you're providing an invalid date string. If you try to do this in the browser (dateInputNode.value = '03/29/2019') then you'll see the following warning:

The specified value "03/30/2019" does not conform to the required format, "yyyy-MM-dd".

Here's a working version: https://codesandbox.io/s/rln7q07o0m

You'll notice that the display value may be 03/29/2019, but the value property formats it according to the specification mentioned. Good luck.

[jmeyers91]

🤦 I should have thought of that before posting an issue. Changing the date formats fixed my tests.

Thank you