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!");
});

然后我也尝试使用完成回调（但未定义）：

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语句中（如下）

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，尽管这是更个人的偏爱。

此测试也不需要使用完成的回调，仅用于异步功能（例如MockApi调用）

如何用酶测试输入onChange事件？

1 个答案: