使用 jest 和 react-testing-library 测试对象的属性时出错
Error in testing the properties of object using jest with react-testing-library
第一次写测试。我正在为用钩子编写的 ReactJS 应用程序编写测试,并使用 Jest and 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
这是对象的第一个 属性,那么我该如何解决这个问题?
getBy
functions in react-testing-library
will always return the first matching item for your query - if you want to search for all matching items, you need to use the getAllBy
函数,其中return一个数组。
我对你的代码有点困惑。在 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()
第一次写测试。我正在为用钩子编写的 ReactJS 应用程序编写测试,并使用 Jest and 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
这是对象的第一个 属性,那么我该如何解决这个问题?
getBy
functions in react-testing-library
will always return the first matching item for your query - if you want to search for all matching items, you need to use the getAllBy
函数,其中return一个数组。
我对你的代码有点困惑。在 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()