使用testing library选择下拉元素
使用testing library选择下拉元素
提问于 2020-04-28 15:52:13
显然，我根本不理解测试库。它们有一个“点击”功能，但似乎没有从选择元素中选择一个简单的下拉选项的功能。这是失败的，说明选择了0，而不是预期的1。我如何使选择工作？
import React from "react";
import {render} from '@testing-library/react'
import {screen} from '@testing-library/dom'
let container: any;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container.remove();
container = null;
});
it('AddRental should display', () => {
render(<select name="town" data-testid="town" className="form-control"
aria-label="Select the Town">
<option value="0">--Town--</option>
<option value="1">My town</option>
<option value="2">Your Town</option>
<option value="3">The other town</option>
</select>, {container});
const dropdown = screen.getByTestId('town');
expect(dropdown.value)
.toBe('0');
dropdown.click();
const athabascaOption = screen.getByText('My town');
athabascaOption.click();
const byTestId = screen.getByTestId('town');
expect(byTestId.value)
.toBe('1')
});回答 1
Stack Overflow用户
发布于 2020-11-13 23:53:16
您可以使用fireEvent来实现此目的。它可以从@testing-library/react导入(顺便说一下，为了方便起见，screen也可以)：
import {render, screen, fireEvent} from '@testing-library/react'下面是使用此函数重写的测试用例：
render(
<select
name="town"
data-testid="town"
className="form-control"
aria-label="Select the Town"
>
<option value="0">--Town--</option>
<option value="1">My town</option>
<option value="2">Your Town</option>
<option value="3">The other town</option>
</select>,
{ container },
);
const dropdown = screen.getByTestId('town') as HTMLSelectElement;
expect(dropdown.value).to.equal('0');
fireEvent.change(dropdown, { target: { value: '1' } });
expect(dropdown.value).to.equal('1');对于进一步的解释，在this GitHub issue和this CodeSandbox from a comment on the issue中有一些有用的讨论。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61475223
复制相关文章
相似问题
腾讯云开发者
