Симуляция не работает без состояния в реагировать JS

Question

Это мой функциональный Компонент.

const InputText = (props: Props) => {
 return (
  <div>
  <StyledInput type="text" placeholder={props.placeholder} />
  <br></br>
   </div>
   );
  };
 export default InputText;

and this is my test cases.
enter code here
  const wrap = (props: Props) => shallow(<InputText {...props} />);
  it("input text change", () => {
// const wrap = (props: Props) => mount(<StyledInput {...props} />);
  const wrapper = wrap({ placeholder: "UserName" });
  const usernameInput = wrapper.find("input");
  usernameInput.simulate("change", { target: { value: "umesh@hcl.com" } });
  expect(usernameInput.text()).toEqual("umesh@hcl.com");
});

Итак, этот тестовый пример завершился ошибкой:

Ожидается "Umesh@hcl.com" и получено: "";

Как я могу решить эту проблему?

Answer 1

Отметьте это

App.test.js

import React from "react";
import { shallow, configure } from "enzyme";
import Input from "./App";
import Adapter from 'enzyme-adapter-react-16';

configure({adapter: new Adapter()});


describe("Input Component", () => {
  it("should trigger the onchange", () => {
    const wrapper = shallow(<Input />);
    wrapper
      .find("input")
      .simulate("change", { target: { value: "on typing" } });
      expect(wrapper.find('input').props().value).toBe('on typing')
  });
});

App.js

import React, { useState } from "react";

const InputText = props => {
  const [inputText, setInput] = useState("");

  const onHandleChange = e => {
    setInput(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={onHandleChange}
      />
      <br />
    </div>
  );
};

export default InputText;