react testing library assert dropdown options are rendered in correct order

Question

I'm trying to test a dropdown component rendering certain options in the correct order.

Currently the test-code looks like:

const dropdown = getByTestId('my-dropdown');
const selectOptions = dropdown.ownerDocument.querySelectorAll(
 '.Select-menu .Select-option button'
);

expect([...selectOptions].map(o => o.innerText)).toEqual([
 'All options',
 'Option X',
 'Option Y',
 'Option Z',
]);

This testing approach works, but it feels like it depends too much on the implementation details of my component. One of the core tenets of react-testing-library is that we want our tests to avoid including implementation details of components.

Does anybody have any insights on how I can assert that my dropdown renders options in the correct order? How would you do this with react-testing-library?

It is a custom select built in React. You could think of it as a https://react-select.com/home — Seneca, Sep 13 '21 at 07:58

Maulik · Answer 1 · 2022-06-08T10:51:47.787

It should be like below,

describe(() => {
   beforeEach(() => {
     render (
        <YourcomponentWith_without_props/> 
     )
   }); 
   
   afterEach(cleanup);   

});


it('should rendered option inside select tag', () => {
   const dropdown = screen.getByTestId('my-dropdown');
   console.log(dropdown); // To confirm element is in DOM 
   expect(dropdown).toBeInTheDocument(); 
   fireEvent.click(dropdown); // click on dropdown buttons
   // from here check your DOM rendering what id / classes are there at options using findAll, queryAll etc.
   const dropDownOptions = screen.getAllByText('some-id');
   
   expect(dropDownOptions).toHaveLength(1);   
   
});

react testing library assert dropdown options are rendered in correct order

1 Answers1