无法在酶测试中更新Office Fabric UI TextField的值

Question

我有一个React组件，它使用TextField中的office-ui-fabric-react 。我正在使用Enzyme / Jest编写单元测试。我无法更新TextField的值。

我尝试过使用.simulate('change', { target: { value: 'Input Value'} }。

这是我组件的简化版本：

const FeedbackForm = (props: IFeedbackFormProps): JSX.Element => {
  const [comments, setComments] = React.useState<string>('');

  const onCommentChange = (_event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void => {
    setComments(newValue);
  };

  return (
          <TextField
            value={comments}
            onChange={onCommentChange}
          />
  );
};

这是我的测试：

it('should enable the submit button when the user enters a comment', () => {
     const wrapper = shallow(<FeedbackForm {...mockProps} />);
     const commentBox = wrapper.find(TextField);
     const submitButton = wrapper.find('[type="submit"]');

     commentBox.simulate('change', { target: { value: 'test value' } });

     // This button gets enabled when the text area is not empty
     expect(submitButton.is('[disabled]')).toBe(false);
   });

UI正常工作。查看commentBox.debug()，组件的value不变。

我还验证了在调用onCommentChange时会调用commentBox.simulate(...)。

Answer 1

如何尝试关注？

commentBox.simulate('change', { target: { id: 'id' } }, 'test value');