Как Enzyme setState () работает с мелкими компонентами?

Question

У меня есть компонент, который отображает разные вещи в соответствии с текущим локальным состоянием. Я новичок в модульном тестировании и не понимаю, почему мои тесты терпят неудачу. Вот мой компонент (упрощенный для лучшего понимания):

  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>
    );
  }
} 

Здесь я хочу установитьState в моем тестовом файле и проверить правильность имен классов в соответствии с currentState.

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

Я не понимаю, почему это не работает + мелкий рендеринг, кажется, не принимает во внимание мой setState.

Если бы кто-нибудь мог дать мне какие-либо подсказки о том, как это работает или почему не работает. Спасибо!

Answer 1

Работает как положено. Например,

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();
  });
});

результаты модульного тестирования с отчетом о покрытии:

 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