模拟变化似乎没有很好地测试

Question

我有一个简单的反应组件。它有一个input 文本字段。我正在测试它onChange 功能。但它一直在失败。这是我的组件。

import { useState } from "react";

export default function App() {
  const [search, setSearch] = useState("");

  const handleSetSearch = (event) => {
    setSearch(event.target.value);
  };

  return (
    <div className="App">
      <input
        type="text"
        name="search"
        placeholder="Enter search key"
        onChange={handleSetSearch}
      />
    </div>
  );
}

这是测试。

import { shallow } from "enzyme";
import App from "./App";
import Enzyme from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";

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

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

  it("should call onChange function", () => {
    const input = Wrapper.find("input");
    expect(Wrapper.find('input').value).toEqual(undefined);
    Wrapper.find("input").simulate("change", {
      target: {
        name: "search",
        value: "Test"
      }
    });
    expect(Wrapper.find("input").value).toEqual("Test");
  });
});

此测试返回以下错误。

Expected: "Test"
Received: undefined

      23 |      });
      24 |      console.log(Wrapper.find('input').prop('value'));
    > 25 |      expect(Wrapper.find('input').value).toEqual('Test');

知道我做错了什么以及如何解决吗？

这里是沙盒链接。 https://codesandbox.io/s/stupefied-river-d0mj7?file=/src/App.test.js

Answer 1

你需要使用 .prop()

it("should call onChange function", () => {
  const input = Wrapper.find("input");
  expect(input.value).toEqual(undefined);
  Wrapper.find("input").simulate('change', { target: { value: 'Test1' } })
  expect(Wrapper.find("input").prop('value')).toEqual("Test1");
});