Я написал некоторый код реакции и визуализировал форму, и в форме нет раскрывающегося списка, вместо этого отображаются все 3 параметра, доступные для выбора, без параметра по умолчанию.
Мне интересно, как я могу протестировать и смоделировать изменение опции в шутку, используя фермент?
Ниже приведен фрагмент кода и модульного теста, которые у меня есть
import { ReactDOM } from "react";
enum SomeCategory {
NONE = 0,
A = 1,
B = 2,
C = 3
}
class ReportBase extends React.Component<{}, {}}> {
constructor() {
category = SomeCategory.NONE;
}
render() {
return ReactDOM.div(
{
key: 'some-random-key', className: 'random-class-name',
},
[
React.createElement(
'select',
{
size: 3,
className: 'category',
onChange: (e: React.SyntheticEvent<HTMLSelectElement>) => {
this.category = parseInt(e.currentTarget.value, 10);
},
},
React.createElement(
'option',
{value: SomeCategory.A},
'AAA'
),
React.createElement(
'option',
{value: SomeCategory.B},
'BBB'
),
React.createElement(
'option',
{value: SomeCategory.C},
'CCC'
)
)
]
);
const ReportForm = requireCssWithComponent(ReportBase, [
'/static/css/some.css',
]);
export {ReportForm};
Ниже мой шуточный код модульного тестирования
describe('ReportForm', () => {
it('can select selection category', () => {
spyOn(Browser, 'get_href').and.returnValue(url);
let form = enzyme.mount(<ReportForm />);
let react_form = form.instance().getWrappedComponent();
form.find(`.category option[value=${SomeCategory.A}]`).simulate('click');
expect(react_form.category).toBe(SomeCategory.A);
form.find(`.category option[value=${SomeCategory.B}]`).simulate('click');
expect(react_form.category).toBe(SomeCategory.B);
});
});
Но это не удалось, поскольку ожидаемое значение отличается.
Я считаю, что проблема связана с тем, что событие onClick не работает с параметром select, но как мне в шутку вручную инициировать событие onChange?
Спасибо за любую помощь
Что такое
ReactDOM.div()
?О, мой плохой, это ReactDOMFactories, npmjs.com/package/react-dom-factories