reactjs - 使用 [event.target.name] 时 React jest 测试停止工作

Question

有以下组成

constructor(props) {
        super(props);
        this.state = {
            comment: ''
        }
    }

    handleChange = event => {
            this.setState({ [event.target.name]: event.target.value })
        }
    
    render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <h4>Add a Comment</h4>
                    <textarea name="comment" onChange={this.handleChange} value={this.state.comment} />
                    <div>
                        <button>Submit Comment</button>
                    </div>
                </form>
            )
        }

不会让我在写下面的时候通过测试

it('has a text area where the users can type in', () => {
    wrapped.find('textarea').simulate('change', {
        target: {value: 'new comment'}
    })
    wrapped.update()
    expect(wrapped.find('textarea').prop('value')).toEqual('new comment')

})

但是当使用下面的 handlechange 时同样的测试通过了

 handleChange = event => {
        this.setState({ comment: event.target.value })
    }

如何在使用 [event.target.name] 时通过此测试

Answer 1

您还需要在 event.target 对象中拥有 name 属性

const event = {target: {name: "somename", value: "somevalue"}};

试试下面的，

it("should respond to name change", _ => {
  const event = {target: {name: "somename", value: "somevalue"}};
  const wrapper = mount(
    <Component />
  );
  const handleChangeSpy = jest.spy(wrapper.instance(), "handleChange");
  wrapper.update();
  wrapper.ref('somename').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
});

或者如果 Shallow 呈现，

 it("should respond to name change", _ => {
      const event = {target: {name: "comment", value: "somevalue"}};
      const wrapper = shallow(<Component />);
      const myTextArea = wrapper.find(#comment);
      myTextArea.simulate('change', event);
      expect(...);
    });