Как проверить вход на событие с ферментом?

Question

Я сделал компонент TextInput, вот код:

export const TextInput = (props: ITextInputProps): TReactElement => {
  const {
    errorMessage,
    hasError,
    ...restProps
  } = props;

  return (
    <div>
      <input
        { ...restProps }
        type="text"
        className={ mergeClassNames([
          textInputStyles["text-input"],
          hasError ? textInputStyles["text-input--error"] : "",
        ]) }
      />
      {
        hasError &&
        <p className={ textInputStyles["text-input__error-message"] }>{ errorMessage }</p>
      }
    </div>
    );
};

Теперь я не буду проверять, что onChange работает правильно, я делаю это так:

test("TextInput: should change value", () => {
  let actualInputValue;

  const textInputProps = {
    onChange: (event: ChangeEvent<HTMLInputElement>): void => {
      actualInputValue = event.currentTarget.value;
    },
  };

  const textInputWrapper = shallow(<TextInput { ...textInputProps } />);

  textInputWrapper.find(".text-input")
    .simulate("change", {
      currentTarget: {
        value: "Hello, world!",
      },
    });

  expect(actualInputValue)
    .toBe("Hello, world!");
});

Я чувствую, что actualInputValue иОбработчик onChange является избыточным, потому что я могу получить значение напрямую из .text-input

Я попытался прочитать значение следующим образом (но получил неопределенное значение):

test("TextInput: should change value", () => {
  const textInputWrapper = shallow(<TextInput />);

  textInputWrapper.find(".text-input")
    .simulate("change", {
      currentTarget: {
        value: "Hello, world!",
      },
    });

  expect(textInputWrapper.find(".text-input").props().value)
    .toBe("Hello, world!");
});

Затем я попытался обновить textInputWrapper следующим образом (но получил неопределенный):

test("TextInput: should change value", () => {
  const textInputWrapper = shallow(<TextInput />);

  textInputWrapper.find(".text-input")
    .simulate("change", {
      currentTarget: {
        value: "Hello, world!",
      },
    });

  textInputWrapper.update();

  expect(textInputWrapper.find(".text-input").props().value)
    .toBe("Hello, world!");
});

Затем я также попытался использовать callback (но получил неопределенный):

test("TextInput: should change value", (done: () => void) => {
  const textInputWrapper = shallow(<TextInput />);

  textInputWrapper.find(".text-input")
    .simulate("change", {
      currentTarget: {
        value: "Hello, world!",
      },
    });

  textInputWrapper.update();

  expect(textInputWrapper.find(".text-input").props().value)
    .toBe("Hello, world!");

  done();
});

Я также использовал mount вместо мелкого и получил те же результаты ...

Затем я использовал обработчик actualInputValue и onChange: (

Это мои вопросы: как получить фактическое значение из textInputWrapper.find (". Text-input")?

Спасибостолько !!!

Answer 1

Я думаю, что основная проблема, с которой вы столкнулись, связана с вашим оператором ожидаемого (ниже)

expect(textInputWrapper.find(".text-input").props().value)
.toBe("Hello, world!");

Вы запускаете .props() в массиве вместо одного узла, при условии, что вы знаете, чтобыть только одним ".text-input" замените его следующим:

expect(textInputWrapper.find(".text-input").at(0).props().value)
.toBe("Hello, world!");

Вы также можете использовать .prop("value") вместо .props().value, хотя это более личное предпочтение.

Также вы этого не делаетедля этого теста необходимо использовать обратный вызов done, это только для асинхронных функций, таких как вызовы MockApi