Input doesn't update while testing with React Testing Library

Viewed 792

I've just started using React Test Library and I've got a few issues with my first test.

The aim is to test is the input value updates accordingly to the value change event but I get this error:

    expect(received).toBe(expected) // Object.is equality

    Expected: "foo"
    Received: ""

I don't understand what I'm doing wrong, I followed the documentation and according to screen.debug() the input value is correct:

// more code
              <input
                id="autocomplete"
                name="where"
                placeholder="Where do you want to eat?"
                type="text"
                value="foo"
              />
// more code

Here's the full test file:

import React from 'react';
import { render, fireEvent, cleanup, screen } from '@testing-library/react';

import { restContext } from './../../../context/restaurant/restContext';
import DisplaySearchBar from '../../../layout/DisplaySearchBar/DisplaySearchBar';

jest.mock('../../Alert/Alert', () => ({
  default: () => null,
  __esModule: true,
}));

const props = {
  handleScriptLoad: jest.fn(),
};
let value = {
  restaurants: [],
  getRestaurants: jest.fn(),
  setAlert: jest.fn(),
};

let wrapper = (
  <restContext.Provider value={value}>
    <DisplaySearchBar {...props} />
  </restContext.Provider>
);

afterEach(cleanup);

describe('Search', () => {
  test('1- input "where" updates its value when input simulated', () => {
    render(wrapper);
    let input = screen.getByPlaceholderText('What do you want to eat?');

    fireEvent.change(input, {
      target: { value: 'foo', name: 'where' },
    });

    screen.debug();

    expect(input.value).toBe('foo');
  });
});

Thanks for your help!

0 Answers
Related