酶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检查className是否正确。

  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