title: Testing a login component with Jest
body: <p>I'm not great at testing, and new to Jest and Enzyme. I  have a Login component that consists of two TextInput components for username and password and a Button component. I am testing each component individually.</p>
  
  <p>I would just like to test that a username and password was returned by onLogin.</p>
  
  <p>Here is the component:</p>
  
  <pre><code>export const onLogin = (user, password) =&gt; {
    console.log('User', user, 'Password', password)
    return [user, password];
  };
  
  function Login() {
    const [user, setUser] = useState("");
    const [password, setPassword] = useState("");
  
    return (
      &lt;LoginWrapper&gt;
        &lt;Branding brand={brand.brandName} /&gt;
        &lt;FormWrapper onSubmit={(e) =&gt; { e.preventDefault(); onLogin(user, password) }}&gt;
          &lt;Stack&gt;
            &lt;TextInput
              className="username"
              type="text"
              label="Username"
              onChange={e =&gt; setUser(e.target.value)}
            /&gt;
          &lt;/Stack&gt;
          &lt;Stack&gt;
            &lt;TextInput
              className="password"
              type="password"
              label="Password"
              onChange={e =&gt; {setPassword(e.target.value); console.log('user', user)}}
            /&gt;
          &lt;/Stack&gt;
          &lt;Stack padding="0" align="right"&gt;
            &lt;Button type="submit"&gt;Login&lt;/Button&gt;
          &lt;/Stack&gt;
        &lt;/FormWrapper&gt;
      &lt;/LoginWrapper&gt;
    );
  }
  
  export default Login;
  </code></pre>
  
  <p>My test:</p>
  
  <pre><code>describe("&lt;Login /&gt;", () =&gt; {
    it("renders text input correctly", () =&gt; {
      const tree = renderer.create(&lt;ThemeProvider theme={themes.default}&gt;&lt;Login /&gt;&lt;/ThemeProvider&gt;).toJSON();
      expect(tree).toMatchSnapshot();
    });
  
    it("calls onLogin when button clicked", () =&gt; {
      const onSubmitMock = jest.fn();
  
      const component = Enzyme.mount(
        &lt;ThemeProvider theme={themes.default}&gt;&lt;Login onSubmit={onSubmitMock} /&gt;&lt;/ThemeProvider&gt;
      );
  
      component.find("input.username").simulate('change', { target: { value: 'myUser' } })
      component.find("input.password").simulate('change', { target: { value: 'myPassword' } })
      component.find("form").simulate("submit");
  
      console.log("onClickMock.mock", onSubmitMock.mock)
      expect(onSubmitMock).toBeCalled()
    });
  });
  </code></pre>
  
  <p>Results:</p>
  
  <blockquote>
    <p>Expected mock function to have been called, but it was not called.</p>
  </blockquote>