使用带有反应测试库的jest测试对象属性时出错

Question

这是我第一次写测试。我正在为用钩子编写的ReactJS应用程序编写测试，并使用取笑和反应-测试-库进行测试。

当我测试对象将多次呈现它的所有属性时，我会遇到麻烦。

以下是功能组件：

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

getBy函数在react-testing-library中将始终返回查询的第一个匹配项--如果要搜索所有匹配项，则需要使用getAllBy函数，后者返回数组。

Answer 2

我被你的代码弄糊涂了。在ItemDetails中，您正在从item中提取值code。但是在测试中，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()