setState callback is not called (React 16?)

In short: When testing a component which depends on the callback of setState(updater, callback), it’s not working since our last react-native/react upgrade.

In detail: Since the last react-native upgrade (which comes with react 16 alpha), a test is failing which previously worked. I report this issue here because the production code works. setState(updater, callback) has been changed in react 16, so I assume some enzyme “glue code” does not work anymore. I’ve created a snippet which shows the problem:

import React, { Component } from 'react';
import { shallow } from 'enzyme';
import { TextInput } from 'react-native';

class MyTextInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.text,
            // another prop for another TextInput...
        };
    }

    render() {
        return (
            <TextInput
                onChangeText={(text) => {
                    this.setState({ text }, () => this.props.onChangeText(this.state));
                }}
                value={this.state.text}
            />
            // another TextInput...
        );
    }
}

describe('MyTextInput', () => {
    it('shows the bug', () => {
        const onChangeMock = jest.fn();
        const textField = shallow(<MyTextInput text={'41'} onChangeText={onChangeMock} />);
        textField.simulate('ChangeText', '42');
        expect(textField.state('text')).toBe('42'); // OK - setState's updater works
        expect(onChangeMock).toHaveBeenCalledTimes(1); // NOT OK - setState's callback is not working
        expect(onChangeMock).toHaveBeenCalledWith({ text: '42' }); // NOT OK
    });
});

Relevant dependencies:

• enzyme@2.8.2
• react@16.0.0-alpha.6
• react-native@0.44.0

Thank you in advance!

[mabounassif]

No solution with enzyme? Using react-test-renderer would completely change the test setup.

[Soheevich]

@ljharb Well, I guess this problem doesn’t cause by enzyme, because I didn’t use it in my project.