How does Enzyme setState() works on shallow components?

Question

I have a component which renders different things according to current local state. I'm pretty new to unit testing and I don't understand why my tests are failing. Here is my component (simplified for better understanding) :

  state = {
      data: {},
      currentStatus: "LOADING",
  }


  render() {
    return (
      <div className={cx(styles.syntheseContainer)}>
        {
            {
                "SUCCESS":
                    <div className={styles.successContainer}>something here</div>,
                    "EMPTY": null,
                    "LOADING": <div className={styles.fullWidth}>
                                    <TextLoader />
                               </div>,
                    "NOT_STARTED": <div className={styles.notStartedBox}>
                                <FormattedMessage id="fallback.not_started" defaultMessage="Le débat n'a pas encore commencé" />
                             </div>,
                    "ERROR": <div className={styles.errorBox}>
                                <FormattedMessage id="fallback.error" defaultMessage="Une erreur est survenue lors de la récupération du débat" />
                            </div>,
            }[this.state.currentStatus]
        }
      </div>
    );
  }
} 

Here, I want to setState in my test file and check if the classNames are correct according to the currentState.

  const wrapper = shallow(
    <Synthese {...mockProps} />
  );
  wrapper.setState({currentStatus: "ERROR"});
  expect(wrapper.find('div').hasClass('errorBox')).toBe(true);
})

I don't understand why it is not working + the shallow rendering seems to not taking into account my setState.

If somebody could give me any clues about how it works or why it is not working. Thanks!

Answer 1

It works as expected. E.g.

index.jsx:

import React, { Component } from 'react';

const styles = {
  syntheseContainer: 'syntheseContainer',
  successContainer: 'successContainer',
  fullWidth: 'fullWidth',
  notStartedBox: 'notStartedBox',
  errorBox: 'errorBox',
};

export default class Synthese extends Component {
  state = {
    data: {},
    currentStatus: 'LOADING',
  };

  render() {
    return (
      <div className={styles.syntheseContainer}>
        {
          {
            SUCCESS: <div className={styles.successContainer}>something here</div>,
            EMPTY: null,
            LOADING: <div className={styles.fullWidth}></div>,
            NOT_STARTED: <div className={styles.notStartedBox}></div>,
            ERROR: <div className={styles.errorBox}></div>,
          }[this.state.currentStatus]
        }
      </div>
    );
  }
}

index.test.jsx:

import Synthese from './';
import { shallow } from 'enzyme';
import React from 'react';

describe('61614031', () => {
  it('should pass', () => {
    const wrapper = shallow(<Synthese></Synthese>);
    wrapper.setState({ currentStatus: 'ERROR' });
    expect(wrapper.find('div.errorBox')).toBeTruthy();
  });
});

unit test results with coverage report:

 PASS  stackoverflow/61614031/index.test.tsx (9.561s)
  61614031
    ✓ should pass (10ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.171s