Ошибка в тестировании свойств объекта при помощи jest с реагирующей на тестирование библиотекой

Question

Я впервые пишу тесты.Я пишу тесты для приложения ReactJS, написанного с перехватами, и тестирую с использованием Jest и response-testing-library .

У меня возникают проблемы, когда тестируемый объект будетрендеринг несколько раз для всех его свойств.

Вот функциональный компонент:

const ItemDetails = ({ item }) => {
  const { code } = item;
  const { getBarcode } = useStationContext();

  return (
    <>
      <Button
        onClick={() => {
          getBarcode(code);
        }}
      >
        Print Barcode
      </Button>
      <List
        dataSource={formatData(item)}
        renderItem={({ title, value }) => (
          <List.Item>
            <List.Item.Meta
              description={
                <Wrapper>
                  <p>{upperCase(title)}</p>
                  <div data-testid="itmVal">{value}</div>
                </Wrapper>
              }
            />
          </List.Item>
        )}
      />
    </>
  );
};

export default ItemDetails;

Вот тестовый файл:

beforeEach(cleanup);

describe('itemDetails()', () => {
  test('Return Details about item', () => {
    const { getByText, getByTestId, container, asFragment, debug } = render(
      <StationProvider>
        <ItemDetails
          item={{
            id: '296-c-4f-89-18',
            barcode: 'E-6',
          }}
        />
      </StationProvider>,
    );

    expect(getByTestId('itmVal')).toHaveTextContent(
      '296-c-4f-89-18',
    );
    expect(getByTestId('itmVal')).toHaveTextContent('E-6');
  });
});

То, что происходит на самом деле, происходит в каждый разожидаемый тест 296-c-4f-89-18, который является первым свойством объекта, так как я могу это исправить?

Answer 1

Я немного смущен вашим кодом.В ItemDetails вы извлекаете значение code из item.Но затем в тесте item имеет значение { id: '296-c-4f-89-18', barcode: 'E-6' }.

В любом случае, похоже, что вы хотите проверить, что два передаваемых вами параметра отображаются.Я бы использовал getByText в этом случае:

const { getByText } = render(
  <StationProvider>
    <ItemDetails
      item={{
        id: '296-c-4f-89-18',
        barcode: 'E-6',
      }}
    />
  </StationProvider>,
);

expect(getByText('296-c-4f-89-18')).toBeInTheDocument()
expect(getByText('E-6')).toBeInTheDocument()

Answer 2

Функции getBy в react-testing-library всегда будут возвращать первый соответствующий элемент для вашего запроса - если вы хотите найти все соответствующие элементывам необходимо использовать функции getAllBy, которые возвращают массив.