Как протестировать с помощью шутки и фермента и смоделировать выбор варианта?

avatar
Ohhh
8 августа 2021 в 23:47
344
0
1

Я написал некоторый код реакции и визуализировал форму, и в форме нет раскрывающегося списка, вместо этого отображаются все 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?

Спасибо за любую помощь

Источник
slideshowp2
9 августа 2021 в 02:50
0

Что такое ReactDOM.div()?

Ohhh
9 августа 2021 в 03:32
0

О, мой плохой, это ReactDOMFactories, npmjs.com/package/react-dom-factories

Ответы (0)