тестирование фермента реагирует с контекстным API

Question

Я пытаюсь проверить форму. Когда форма отправлена, она должна установить состояние error: true, а затем появится div с информацией об ошибке. Мой тест выглядит так:

 outer = shallow(<Search />);

 it("should not submit a form and display an error if title or author is empty", () => {
    const Children = outer.props().children({});
    const wrapper = mount(Children);
    const button = wrapper.find("form button");
    button.simulate("submit", {
      preventDefault() {
        outer.setState({ error: true });
      }
    });
    expect(wrapper.find("div.error")).toHaveLength(1);
  });

К сожалению, это не работает. Я новичок в модульном тестировании и понятия не имею, правильно ли я это делаю и как мне это исправить.

Я думаю, что я должен как-то получить входные значения, но не знаю как.

Answer 1

Это пример для установки значения для элементов ввода:

it('Should capture firstname correctly onChange', function(){
    const component = mount(<Form />);
    const input = component.find('input').at(0);
    input.instance().value = 'hello';
    input.simulate('change');
    expect(component.state().firstname).toEqual('hello');
})

Но это может не сработать по другим причинам, убедитесь, что вы инициализировали компоненты фермента в beforeAll(). Попробуйте прочитать примеры энзимов на эту тему.