Calling prop callback in react test renderer doesn't update hooks

Question

I'm trying to figure out how to test a react function component that uses hooks to keep track of state. The problem I'm having is when I call the onChange prop function passed to the input components, the value of my useState hook isn't being updated, so when I trigger the form submit, the result doesn't reflect the state changes.

Here is the component I'm testing:

import React, { useState, ChangeEvent, FormEvent } from 'react';
import styled from '../styled';
import Column from './Column';
import BlockButton from './BlockButton';
import Input from './Input';
import Form from './Form';
import InputRow from './InputRow';

export type LoginFormOnSubmit = (result: LoginFormResult) => any;
export interface LoginFormResult {
  employeeId: string;
  password: string;
}
export interface LoginFormProps {
  onSubmit?: LoginFormOnSubmit;
}

const LoginForm: React.FunctionComponent<LoginFormProps> = props => {
  const { onSubmit, ...rest } = props;
  const [employeeId, setEmployeeId] = useState('');
  const [password, setPassword] = useState('');

  function handleEmployeeIdChange(event: ChangeEvent<HTMLInputElement>) {
    setEmployeeId(event.currentTarget.value);
  }

  function handlePasswordChange(event: ChangeEvent<HTMLInputElement>) {
    setPassword(event.currentTarget.value);
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    if(onSubmit) {
      onSubmit({
        employeeId,
        password,
      });
    }
  }

  return (
    <Column {...rest}>
      <h1>SHIFT LEDGER LOGON</h1>
      <Form onSubmit={handleSubmit}>
        <InputRow>
          <label>Employee ID:</label>
          <Input
            type="text"
            value={employeeId}
            onChange={handleEmployeeIdChange}
            data-testid="employee-id-input"
          />
        </InputRow>
        <InputRow>
          <label>Password:</label>
          <Input
            type="password"
            value={password}
            onChange={handlePasswordChange}
            data-test-id="password-input"
          />
        </InputRow>
        <BlockButton data-testid="submit-button">Enter</BlockButton>
      </Form>
    </Column>
  );
};

export default styled(LoginForm)`
  background-color: #F0EBDF;
  justify-content: center;
  flex: 1;

  h1 {
    text-align: center;
  }

  ${Form} {
    align-items: center;
  }

  label {
    width: 150px;
  }
`;

And here is my test:

import React from 'react';
import sinon from 'sinon';
import TestRenderer, { act } from 'react-test-renderer';
import LoginForm from '../LoginForm';
import Form from '../Form';

describe('components/LoginForm', () => {
  test('Should be able to edit employee id', async () => {
    const onSubmit = sinon.fake();
    const employeeId = 'test id';
    const rendered = TestRenderer.create(<LoginForm onSubmit={onSubmit}/>);


    act(() => {
      const wrapper = rendered.root;
      const employeeIdInput = wrapper.findByProps({ 'data-testid': 'employee-id-input' });

      employeeIdInput.props!.onChange({
        currentTarget: {
          value: employeeId,
        },
      });

      wrapper.findByType(Form).props.onSubmit({
        preventDefault: sinon.fake(),
      });
    });

    expect(onSubmit.calledOnce).toBeTruthy();
    expect(onSubmit.args).toEqual([[
      {
        employeeId,
        password: '',
      }
    ]]);
  });
});

And the error I'm seeing:

  ● components/LoginForm › Should be able to edit employee id

    expect(received).toEqual(expected)

    Difference:

    - Expected
    + Received

      Array [
        Array [
          Object {
    -       "employeeId": "test id",
    +       "employeeId": "",
            "password": "",
          },
        ],
      ]

      42 |     });
      43 |
    > 44 |     expect(onSubmit.calledOnce).toBeTruthy();
         |                                 ^
      45 |     expect(onSubmit.args).toEqual([[
      46 |       {
      47 |         employeeId,

      at react_test_renderer_1.act (src/components/__tests__/LoginForm.test.tsx:44:33)
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12492:12)
      at Object.act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13146:18)
      at Object.test (src/components/__tests__/LoginForm.test.tsx:29:5)

Some extra info:

• typescript 3.3.3
• react 16.8.2
• react-dom 16.8.2
• react-test-renderer 16.8.5
• jest 24.3.1

Answer 1

It looks like the issue is that the state doesn't update during an act function, it only updates after the act completes .

Here is a simple example:

import React, { useState } from 'react';
import TestRenderer, { act } from 'react-test-renderer';

function Example(props) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)} data-test-id="increment">
        Increment
      </button>
      <button onClick={() => props.submit(count)} data-test-id="submit">
        Submit
      </button>
    </div>
  );
}

test('Example', () => {
  const submitSpy = jest.fn();
  const rendered = TestRenderer.create(<Example submit={submitSpy} />);

  act(() => {
    rendered.root.findByProps({ 'data-test-id': 'increment' }).props.onClick();  // increment
    rendered.root.findByProps({ 'data-test-id': 'submit' }).props.onClick();  // submit
    expect(rendered.root.findByType('p').props.children).toBe(0);  //  <= still 0
    expect(submitSpy).toHaveBeenLastCalledWith(0);  //  <= still 0
  });

  expect(rendered.root.findByType('p').props.children).toBe(1);  //  <= NOW it's 1
  rendered.root.findByProps({ 'data-test-id': 'submit' }).props.onClick();  // submit again
  expect(submitSpy).toHaveBeenLastCalledWith(1);  // Success!
});

So it looks like submitting the form after the act instead of during the act might fix the problem.