React testing library check the text inside a div with test-dataid

I have a React component called order details. There I print 7 details about the order based on this array.

 const items = [
    {
      name: "Order ID",
      value: "01234567890",
    },
    {
      name: "Channel ID",
      value: "88888",
    },
    {
      name: "Sales Channel",
      value: "Shopify",
    },
    {
      name: "Order Date",
      value: "23-09-2022 | 00:00:00",
    },

    {
      name: "Order Total",
      value: "£10.00 GBP",
    },
    {
      name: "Shipping Method Selected",
      value: "Method",
    },
    {
      name: "Tags",
      value: "Shopify",
    },
  ];

In my component, I loop this array and print it like this

 items.map(item=><div data-testid={item.name}>
  <div>
  {item.name}
  </div>
  <div>
  {item.value}
  </div>
  </div>)

I do want to write a unit test to this that will make sure the component is rendered successfully with the data.

I can easily write for name properties like this

const orderIdDiv = screen.getByText(/order id/i);
const chanelIdDiv = screen.getByText(/channel id/i)



expect(orderIdDiv).toBeInTheDocument();
expect(chanelIdDiv).toBeInTheDocument();

But for the value properties, I want to make sure that the value is printed in the relevant div (Eg:- value 88888 should be printed next to the Chanel ID div. Not next to something else )

So I wrote this code

// GET THE ELEMENT BY TEST ID
const orderIdDataElement = screen.getByTestId(/order id/i);
// GET THE TEXT IN THAT ELEMENT
const orderIdData = within(orderIdDataElement).getByText(/012345678901222/i);

expect(orderIdLabelElement).toBeInTheDocument();
expect(orderIdData).toBeInTheDocument();

This test always passes please note that the getByText 012345678901222 is wrong. Still, the test got passed.
What is wrong with my code?

I reproduced your example and the tests failed, like they should. It is OK to access elements by regular expression like you have done, although it may not be the best way.

When I changed the orderIdData test to

const orderIdData = within(orderIdDataElement).getByText(/01234567890/i);
expect(orderIdData).toBeInTheDocument();

the test passed.

I can't reproduce the problem. There must be some missing information that you haven't included in your question.

Also note that your test has the line

expect(orderIdLabelElement).toBeInTheDocument();

but you haven't shown us where orderIdLabelElement is defined.

My preferred method of testing your React component would be to loop through the items and, for each one, test that the textContent property of the div is as expected. Here is a working test file that does this:

import React from 'react';
import '@testing-library/jest-dom';
import { render, screen } from "@testing-library/react";
const items = [
{
name: "Order ID",
value: "01234567890",
},
{
name: "Channel ID",
value: "88888",
},
{
name: "Sales Channel",
value: "Shopify",
},
{
name: "Order Date",
value: "23-09-2022 | 00:00:00",
},
{
name: "Order Total",
value: "£10.00 GBP",
},
{
name: "Shipping Method Selected",
value: "Method",
},
{
name: "Tags",
value: "Shopify",
},
];
items.map((item) => {
it(`renders the correct content for ${item.name}`, () => {
render(
// *** Replace this with the code that renders your component ***
<>
{items.map((item) => (
<div key={item.name} data-testid={item.name}>
<div>
{item.name}
</div>
<div>
{item.value}
</div>
</div>
))}
</>
);
const renderedItem = screen.getByTestId(item.name);
expect(renderedItem.textContent).toEqual(`${item.name}${item.value}`)
});
});

A couple of extra points:

• I've added a key property to the mapped items to silence a warning from React. The React docs explain why this is recommended.
• It is best practice not to get elements by Test ID if you can avoid it, but I won't go into this in detail as your question title specifically states test-dataid. You can read more about this in the Testing Library docs.

Hope this helps. Happy coding!