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!