метод имитации обработчика с params в Enzyme - PullRequest
Новая
       4

метод имитации обработчика с params в Enzyme

1 голос
/ 02 марта 2020

Я написал метод-обработчик, связанный с событием onChange элемента input, и он принимает два параметра 

<div className="p-lg-12">
    <InputText
        value={this.state.blog.title}
        id="title"
        placeholder="Blog Title"
        onChange={e =>
            this.handleInput("title", e.target.value)
        }
    />
</div>

в зависимости от первого параметра. Я изменяю значение указанного поля c в объект, управляемый объектом состояния 

handleInput(key, value) {
    let blogData = Object.assign({}, this.state.blog);
    blogData[key] = value;
    this.setState({ blog: blogData });
}

Я не могу simulate этот метод в ферменте 

it("updates blog data with user input", () => {
    const blogEditor = shallow(<BlogEditor />);
    blogEditor
        .find({ placeholder: "Blog Title" })
        .simulate("onChange", ("title", { target: { value: "x" } }));
    expect(blogEditor.state().blog.title).toEqual("x");
});

Полученная ошибка 

expect(received).toEqual(expected) // deep equality

Expected: "x"
Received: ""

  45 |             .find({ placeholder: "Blog Title" })
  46 |             .simulate("onChange", ("title", { target: { value: "x" } }));
> 47 |         expect(blogEditor.state().blog.title).toEqual("x");
     |                                               ^
  48 |     });
  49 | });
  50 |

  at Object.<anonymous> (resources/js/tests/BlogEditor/BlogEditor.test.js:47:47)

Итак, правильно ли я передаю параметры в метод-обработчик?

Кроме того, это может быть метод find, который пока не возвращает нужный элемент, я пробовал

  • find('#title') в качестве title - это HTML id
  • find({ placeholder: "Blog Title" }) в качестве этого компонента в виде 5 входных компонентов, каждый с уникальным атрибутом id и значением заполнителя.

Ответы [ 2 ]

1 голос
/ 02 марта 2020

При использовании имитации на неглубоком рендере обработчик событий должен находиться на этом узле, поскольку неглубокое распространение не происходит нормально. Поскольку тест относится к BlogEditor, а не Input, я бы рекомендовал использовать mount() вместо shallow().

РЕДАКТИРОВАТЬ

Из документов Enzyme:

Common Gotchas

  • В настоящее время моделирование событий для поверхностного средства визуализации не распространяется, как это обычно можно ожидать в реальной среде. В результате необходимо вызвать .simulate () на фактическом узле, для которого установлен обработчик события.

Подробнее: https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/simulate.html

0 голосов
/ 02 марта 2020

Итак, два изменения, вроде @ shaun-e-tobias, справедливо упомянули, что мы должны использовать mount в этом случае; и пришлось добавить метод at, поскольку find возвращает массив, похоже, обновленный тест до 

it("updates blog data with user input", () => {
    const blogEditor = mount(<BlogEditor />);
    blogEditor
        .find({ placeholder: "Blog Title" }).at(0).
        .simulate("onChange", ("title", { target: { value: "x" } }));
    expect(blogEditor.state().blog.title).toEqual("x");
});

, который затем выдал ошибку 

TypeError: ReactWrapper::simulate() event 'onChange' does not exist

Я использую неправильно аргумент для change события, как замечено в enzyme документах, поэтому метод, который работает, становится 

it("updates blog data with user input", () => {
    const blogEditor = mount(<BlogEditor />);
    blogEditor.find("#title").at(0).simulate("change",("title", { target: { value: "x" } }));
    expect(blogEditor.state('blog').title).toEqual("x");
});

Или вы также можете вызвать событие через props 

blogEditor.find("#title").at(0).props().onChange(("title", { target: { value: "x" } }));
...