'Shallow component not updating on jest.fn call

After updating a series of dependencies, most notably jest and react/react-dom, a once working Unit Test is no longer working. After spending the last week reading through the ChangeLogs of the dependencies that changed, I still cannot find out why it is breaking.

The Component - stripped down for the relevant portions


    [imports, etc.] ->not code, just giving a stripped down version
    
    class MyComponent extends React.Component {
      render() {
        const { Foo, errorNotice, disabled } = this.props;
        
        return (
          <form autoComplete="Off">
            <Paper className="top-paper edit-form">
              <h1>{ Foo.id ? 'Edit' : 'Add' } My Foo </h1>
              <div className="flex">
                <div className="flex-column">
                  <FormControl
                     className="has-columns"
                     component="fieldset"
                  >
                    <TextField
                      id="foo-name"
                      fullWidth={true}
                      disabled={disabled}
                      name="name"
                      inputProps={{ maxLength: 50 }}
                      className="block"
                      label="Name"
                      value={Foo.name}
                      onChange={this.props.onChange}
                      error={!!errorText.name}
                      helperText={errorText.name}
                    />
    
    [closing tags, etc.] -> as as above, not code, just giving a stripped down version
    
    export default MyComponent

The Test


    import React from 'react';
    import { shallow } from 'enzyme';
    
    import MyComponent from "./my-component";
    
    const Foo = {
      name: 'Foo Name',
      val_x: 'NONE'
    };
    
    const handleTextChange = jest.fn(({ target: { name, value} }) => {
      Foo[name] = value;
      testMyComponent.setProps({ Foo });
    });
    
    const testMyComponent = shallow(
      <MyComponent
        Foo={Foo}
        errorNotice={{}}
        onChange={handleTextChange}
      />
    );
    
    describe('Test component display', () => {
      it('Name field show display attachment point name', () => {
        const nameInput = testMyComponent.find('[name="name"]');
        expect(nameInput.props().value).toBe(Foo.name);
      });
    });
    
    ^^ This Test Passes
    
    describe('Test Foo interactions', () => {
      it('Updating Name field should update Foo name', () => {
        const newName= 'New Name';
        testMyComponent.find('[name="name"]').simulate('change', {
          target: { name: "name", value: newName }
        });
        expect(testMyComponent.find('[name="name"]').props().value).toBe(newName);
      });
    });
    
    ^^ This Test Fails on the 'expect' line. The name remains the old name, 'Foo Name'

The output when I call testMyComponent.debug() after the .simulate('change' is as follows (again stripped down)

<WithStyles(ForwardRef(TextField)) id="foo-name" fullWidth={true} disabled={[undefined]} name="name" inputProps={{...}} className="block" label="Name" value="Foo Name" onChange={[Function: mockConstructor] { _isMockFunction: true, ... , results: [ Object [Object: null prototype] {type: 'return', value: undefined } ], lastCall: [ { target: { name: 'name', value: 'New Name' ....

^^ So I can see through lastCall that the handleTextChange function is being called, but its not actually performing the update. Moreover, if I put a test for

expect(handleTextChange).toHaveBeenCalledTimes(1);

Then that text passes, it effectively gets called. But again, the update doesn't actually occur.

The dependencies that were changed were


    react 16.13.1 -> 17.0.2
    react-dom 16.13.1 -> 17.0.2
    jest 24.9.0 -> 27.5.1
    material-ui/core 4.11.0 -> 4.12.13

but enzyme stayed the same a 3.11.0

Does any of this make any sense? Like I mentioned I've read changelogs and update posts on all of the dependencies that were updated and I cant see anything that needs to change in the test, but clearly it is failing. I have read Jest/Enzyme Shallow testing RFC - not firing jest.fn() but the solution there is not working for me. I should also mention I have called .update() on the component but to no avail.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source