Styjun

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

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.