Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React testing library: Select input element by using class name

<div class="kowKTj bDEoGl">
  <div class="Wrappers__Flex-bnXnJe gNIMqf">
    <input placeholder="" type="text" class="kGGXDu kNnwpQ emailtextBox form-control" value="">
  </div>
</div>

In the above markup, some of the class names are dynamically added by styled components.

Help us how can we select the input property using emailtextBox class?

Or suggest any alternatives to find the inputbox.

NOTE: we’re not using input label concepts using only divs.

Tags:

2

Answers


  1. 0

    Add a Data-testid Attribute to the element and use that

    <input placeholder="" type="text" data-testid="email-input" value="">
const input = screen.getByTestId('email-input');

    Or you could use the Label Text too.

    Login or Signup to reply.
  2. 0

    Use ByRole queries. <input/> element has textbox role, see ARIA: textbox role

    data-testid

    it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your software is used and should be avoided if possible. That said, they are way better than querying based on DOM structure or styling css class names.

    import React from 'react';

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

describe('78311087', () => {
  test('should pass', () => {
    render(
      <div className="kowKTj bDEoGl">
        <div className="Wrappers__Flex-bnXnJe gNIMqf">
          <input placeholder="" type="text" className="kGGXDu kNnwpQ emailtextBox form-control" value="" />
        </div>
      </div>,
    );

    const input = screen.getByRole('textbox');
    expect(input).toBeInTheDocument();
    expect(input).toHaveClass('emailtextBox');
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search