1

I recently started using the @testing-library/user-event library and I am facing a lot of issues. I am trying to test a textbox validation flow however I am getting the error

TypeError: Cannot read properties of undefined (reading 'getFileName')

      at _default (node_modules/@jest/source-map/build/getCallsite.js:86:60)
      at Function.write (node_modules/@jest/console/build/BufferedConsole.js:104:51)
      at console._logError (node_modules/@jest/console/build/CustomConsole.js:107:12)
      at console.error (node_modules/@jest/console/build/CustomConsole.js:147:10)

This is my testcase

  test('allows user to add comments in the comment Box', () => {
    render(
      <ApproveModal
        showApproveModal={showApproveModal}
        updateApproveModal={updateApproveModal}
        requestId={requestId}
        hierarchyId={hierarchyId}
      />
    );

    expect(screen.getByText('Enter few details before Approval')).toBeInTheDocument();

    const commentTextBox = screen.getByRole('textbox');
    userEvent.type(commentTextBox, 'Approved By Admin');

    expect(screen.queryByText('Please input a Valid Comment!')).not.toBeInTheDocument();

    userEvent.type(commentTextBox, '');

    // expect(screen.queryByText('Please input a Valid Comment!')).toBeInTheDocument();
  });

Has anybody faced this issue before?

Ayushi
  • 31
  • 1
  • 3

1 Answers1

0

Try to instantiate the userEvent class with the line const user = userEvent.setup() and replace the existing userEvent calls with user.

This might help you as well: https://testing-library.com/docs/user-event/setup

Also, it may be better to render only one component at a time instead of multiple and then try to test what you are testing on that specific component.

AAMCODE
  • 415
  • 1
  • 7
  • 20