Question

这是我第一次编写测试。我正在为使用钩子编写的ReactJS应用编写测试，并使用Jest和react-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

react-testing-library中的getBy函数将始终返回查询的 first 匹配项-如果要搜索 all 匹配项，则需要使用getAllBy函数，该函数返回一个数组。

Answer 2

您的代码让我有些困惑。在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()

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

2 个答案: