So when I try to catch input
by getByTestId
I get an error:
TestingLibraryElementError: Unable to find an element by: [data-testid=”Name”]
I’ve changed method to queryByTestId
and I’d been getting error:
Unable to fire a “change” event – please provide a DOM element.
I found out that if I enter following code:
expect(input).toBeNull;
I don’t get any errors at all and test is passed.
AddUser.test.js:
import React from 'react';
import '@testing-library/jest-dom';
import AddUser from 'views/AddUser';
import Dashboard from 'views/AddUser';
import { screen, fireEvent } from '@testing-library/react';
import { renderWithProviders } from 'helpers/renderWithProviders';
describe('Input With Button', () => {
it('Renders the component', () => {
renderWithProviders(
<>
<AddUser />
<Dashboard />
</>
);
const input = screen.queryByTestId('Name');
console.log(input);
expect(input).toBeNull; // PASSED!
fireEvent.change(input, { target: { value: 'Andrew' } }); // ERROR!
// fireEvent.change(screen.getByTestId('Attendance'), { target: { value: '89%' } });
// fireEvent.change(screen.getByTestId('Average'), { target: { value: '4.1' } });
// fireEvent.click(screen.getByText('Add'));
// screen.getByText('Andrew');
});
});
AddUser.js:
// ...
return (
<ViewWrapper as="form" onSubmit={handleSubmitUser}>
<Title>Add new student</Title>
<FormField label="Name" id="name" name="name" value={formValues.name} onChange={handleInputChange} />
<FormField label="Attendance" id="attendance" name="attendance" value={formValues.attendance} onChange={handleInputChange} />
<FormField label="Average" id="average" name="average" value={formValues.average} onChange={handleInputChange} />
<Button type="submit">Add</Button>
</ViewWrapper>
);
// ...
FormField.js:
// ...
return (
<Wrapper>
<Label htmlFor={id}>{label}</Label>
<Input name={name} id={id} type={type} value={value} onChange={onChange} data-testid={label} />
</Wrapper>
);
// ...
HTML Output of input element:
<input name="name" id="name" type="text" data-testid="Name" class="sc-gsDKAQ dfgpGW" value="">
------ HERE ------
Thank you in advance!