Is there a reason @testing-library/dom isn't installed by default?

[mgpwilson]

Hi guys, I'm a junior dev just getting into the big bad world of testing. I have made the following test:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import RecoverPassword from './RecoverPassword';

it('changes on text input', () => {
    render(<RecoverPassword />);
    const emailTextbox = screen.getByRole('textbox', { name: /your email/i });

    userEvent.type(emailTextbox, '[email protected]');

    expect(emailTextbox).toHaveValue('[email protected]');
});

Which results in the following error: Cannot find module '@testing-library/dom' from 'node_modules/@testing-library/user-event/dist/click.js'

So I understand how to fix the issue fine by installing @testing-library/dom. According to the docs, @testing-library/dom is a requirement for @testing-library/user-event. So my question is, am I doing something wrong? If CRA installs @testing-library/user-event, how come it doesn't also install @testing-library/dom?

[mgpwilson]

Nevermind, solved my problem. If I destructure the return value from the render function of @testing-library/react for my getbyRole function, rather than from screen, like below:

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import RecoverPassword from './RecoverPassword';
it('changes on text input', () => {
    const { getByRole } = render(<RecoverPassword />);
    const emailTextbox = getByRole('textbox', { name: /your email/i });

    userEvent.type(emailTextbox, '[email protected]');

    expect(emailTextbox).toHaveValue('[email protected]');
});

I no longer get the error. Only thing is, I can't say I fully understand why the type of the input to userEvent.type changes the need for a required package to be installed if the function's code still has it as required.