модульное тестирование с использованием фермента

Question

Мой тест не пройден, потому что я не знаю, что объявлять в значении onChange,

describe("App", function() {
  const wrapper = shallow(<App />);

  it("should have an input", function() {
    expect(
      wrapper.contains(<input type="text" onChange={null} />)
    ).toBeTruthy();
  });
});

У меня просто есть это в моем компоненте

<input type="text" onChange={this.changeInput} />

Answer 1

Я хотел бы в первую очередь проверить, существует ли элемент ввода:

it('verifies that an input element is rendered', () => {
  expect(wrapper.exists('input')).toBeTruthy();
});

Затем, проверив это, отдельно проверить, существует ли функция onChange.Я не из тех, кто поддерживает множественные проверки в одном операторе it просто потому, что если какой-либо из операторов expect вызывает сбой, то все нижеприведенные операторы expect никогда не выполняются.Поэтому я бы использовал отдельный it следующим образом:

it('verifies that an onChange function is set`, () => {
  expect(typeof wrapper.find('input').prop('onChange')).toBe('function');
});

Другой вариант - установить фиктивную функцию для onChange пропы и убедиться, что она вызывается правильно следующим образом:

const testOnChange = jest.fn();
const wrapper = mount(<App onChange={testOnChange} />);

it('verifies that the onChange function is invoked', () => {
  wrapper.find('input').prop('onChange')();
  expect(testOnChange.mock.calls).toHaveLength(1);
});

Answer 2

should have an input тест не должен включать onChange вообще.Это можно проверить аналогично тому, как ссылка предлагает:

expect(wrapper.find('input[type="text"]')).to.have.lengthOf(1);

onChange можно проверить в другом тесте, аналогично тому, как показано в этот вопрос .

Answer 3

Вы можете просто ожидать (wrapper.find ('input'). Length) .toBe (1)

не уверен насчет синтаксиса или имен функций, но он есть:)