我在查询时遇到问题,我正在尝试获取两个无线电输入,其中之一没有任何问题,但另一个反应测试库引发了错误:It Found multiple elements with the role "radio" and name /to/i:
queries
test('Render form with default items', () => {
const handleUpdateValue = jest.fn();
const handleNextStep = jest.fn();
render(
<Form
handleNextStep={handleNextStep}
updateValue={handleUpdateValue}
transferFundsValues={{}}
/>
);
const amountInput = screen.getByLabelText(/amount/i);
const fromRadio = screen.getByLabelText(/from/i);
const toRadio = screen.getByLabelText(/to/i);
const messageInput = screen.getByLabelText(/message/i);
const continueButton = screen.getByRole('button', { name: /continue/i });
const cancelButton = screen.getByRole('button', { name: /cancel/i });
// If no value has been entered to the inputs, the continue button must be
// disabled
expect(continueButton).toBeDisabled();
});
html结构
<label for="transferFunds_from" class="ant-form-item-required" title="From">From</label>
<input id="transferFunds_from" type="radio" class="ant-radio-button-input" value="">
<label for="transferFunds_to" class="ant-form-item-required" title="To">To</label>
<input id="transferFunds_to" type="radio" class="ant-radio-button-input" value="">
RTL 引发的错误
TestingLibraryElementError: Found multiple elements with the role "radio" and name `/to/i`
Here are the matching elements:
<input
class="ant-radio-button-input"
id="transferFunds_from"
type="radio"
value=""
/>
<input
class="ant-radio-button-input"
id="transferFunds_to"
type="radio"
value=""
/>
我不知道我是否在 HTML 结构中做错了什么,或者是否是 React 测试库错误。
只是一个快速提示,如果您有多个匹配元素,您可以像这样查询:
HTML:
<a href="/my-element">My element</a>
<a href="/my-element">My element</a>
TEST:
test('renders my element', () => {
let link = screen.getAllByText('My element')[0] as HTMLAnchorElement;
expect(link.href).toContain('/my-element');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)