Closed
Description
16.20.2
Relevant code or config:
const BuyOrSellDepth = ({rows, type, securityId, currency, aggressCallback}: Props) => {
const columns = depthColumnsByOrderType(type)
const rootid = `${type}-market-${securityId}`
const callback = aggressCallback || noop
return (<table data-testid={rootid}>
<caption >Current {orderTypeToDisplayName(type)}</caption>
<tbody>{
rows.map((row) => (<tr key={row.transactionId}
data-testid={`${rootid}-row-${row.transactionId}`}
>
{columns.map(col => {
const key = `${rootid}-row-${row.transactionId}-${col}`
let content: ReactNode = ''
switch (col) {
case 'aggress':
if (row.canAggress) {
content = (
<span onClick={() => callback(row)}>
{orderTypeToAggressLabel(type)}
</span>
)
}
break
case 'price':
content = formatCurrency(row.price, currency)
break
case 'size':
content = `${row.size}`
break
case 'spread':
content = formatSpread(row.spread)
break
}
return (<td
key={key}
data-testid={key}
data-column={col}
>
{content}
</td>)
})}
</tr>
))
}</tbody>
</table>)
}What you did:
test:
it('should have a caption', () => {
const { getByRole } = render(<BuyOrSellDepth rows={[]} securityId={12345} type={type} />)
expect(getByRole('caption')).toHaveTextContent(`Current ${displayName}s`)
})
What happened:
Reproduction:
I think maybe this is it, but codesandbox gets harder and harder to use all the time and I was not able to find how to run the tests anymore
https://codesandbox.io/p/sandbox/react-testing-library-demo-forked-d8ztms?file=%2Fsrc%2F__tests__%2Fhello.js%3A10%2C1
Problem description:
According to the docs, caption should have an implicit caption aria role. You are not allowed to add an aria role to it, and even if you do, RTL errors out and doesn't find it
Suggested solution:
This should work
Metadata
Metadata
Assignees
Labels
No labels