Enzyme setState() 如何作用于浅层组件？答案

【问题标题】：How does Enzyme setState() works on shallow components?Enzyme setState() 如何作用于浅层组件？
【发布时间】：2020-05-05 13:13:40
【问题描述】：

我有一个组件可以根据当前的本地状态呈现不同的东西。我对单元测试很陌生，我不明白为什么我的测试失败了。这是我的组件（为了更好地理解而进行了简化）：

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

这里，我想在我的测试文件中设置状态，并根据当前状态检查类名是否正确。

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

我不明白为什么它不起作用 + 浅渲染似乎没有考虑到我的 setState。

如果有人可以给我任何关于它如何工作或为什么不工作的线索。谢谢！

【问题讨论】：

在 setState 调用后使用 wrapper.debug()。由于您看起来像是在使用样式处理器，因此我希望类名会被破坏

标签： reactjs unit-testing testing enzyme

【解决方案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

【讨论】：