如何解决反应测试:更改测试中的选择值
我正在尝试编写测试以检查<select>
下拉列表中的更改后的值。这是我的组件:
import React from 'react';
const BasicDropdown = ({ key,value,options }) => {
return (
<div className={`basic-dropdown-${key}`}>
<select
className={`basic-dropdown-${key}-select`}
name={`basic-dropdown-${key}-select`}
{...{value}}
>
{options.map(option =>
<option
className={`basic-dropdown-${key}-select-${option}-option`}
key={option}
value={option}
>
{option.charAt(0).toUpperCase() + option.slice(1)}
</option>
)}
</select>
</div>
);
};
export default BasicDropdown;
到目前为止,这非常简单。之所以要有组件,是因为我稍后会根据道具和其他内容来扩展它。因此,我决定为此组件编写一个测试,以开始:
import React from 'react'
import TestUtils from 'react-dom/test-utils';
import BasicDropdown from './BasicDropdown';
const options = ['option-A','option-B','option-C'];
describe("BasicDropdown",() => {
let renderedCmpt;
beforeAll(() => {
renderedCmpt = TestUtils.renderIntoDocument(
<BasicDropdown key="test" value="option-A" options={options} />
)
});
it("Should have correct value after change",() => {
const select = TestUtils.findRenderedDOMComponentWithClass(renderedCmpt,'basic-dropdown-test-select');
expect(select.value).toEqual("option-A");
TestUtils.Simulate.change(select,{target: {value: 'option-C'}});
const selectChanged = TestUtils.findRenderedDOMComponentWithClass(renderedCmpt,'basic-dropdown-test-select');
expect(selectChanged.value).toEqual("option-C");
});
});
我的问题是,使用笑话(jest --coverage=false --config ~/projects/Beehive/config/jest.config.js ~/projects/Beehive/tests/BasicDropdown-test.js
)运行此测试时,出现以下错误:
Expected: "option-C"
Received: "option-A"
在第21行,这意味着在模拟过程中select的值永远不会改变。
我在做什么错了?
解决方法
您需要在onChange
元素上添加select
以反映测试中的更改,否则它将始终为option-A
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。