Simulated event causes opinionated test

[AspenJames]

In src/components/TwitterMessage.js, a common pattern to make form-control change event handlers abstract is to write them as such:

handleChange = (event) => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

Then, by adding id attributes to your form elements that match the keys of your state, the handleChange function is now reusable.

This causes the following test to fail, since the simulated event does not contain any information about the event target's actual attributes:

describe("<TwitterMessage />", () => {
  describe("Saving input value in state", () => {
    it("should update the state when typing", () => {
      const wrapper = shallow(<TwitterMessage maxChars={140} />);
      const event = { target: { value: "f" } };
      wrapper.find("input").simulate("change", event);
      expect(wrapper.find("input").props().value).to.deep.equal(
        event.target.value,
        "The input value is not being updated when it changes"
      );
    });
  });

Adding an id attribute to the JSX in TwitterMessage.js as well as the simulated event will encourage setting the state more abstractly rather than explicitly with setState({ message: event.target.value})