javascript - 测试组件在使用 enzyme 传递某个属性值时不呈现

Question

我想测试我的 LoadingIndicator 组件是否在 status 属性设置为 FETCHING 时加载到 DOM 中，而在准备就绪时不加载。现在我有这个:

import React from 'react';
import { assert } from 'chai';
import { shallow, mount } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';

describe('LoadingIndicator', () => {
  it('should render when the status is FETCHING', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
    assert.ok(wrapper);
  });

  it('should not render when the status is READY', () => {
    const wrapper = mount(<LoadingIndicator status={STATUSES.READY} />);
    assert.isNotOkay(wrapper);
  });
});

组件本身看起来像这样:

import React, { PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import { STATUSES } from '../reducers/status';
import '../styles/LoadingIndicator.scss';

export default class LoadingIndicator extends React.Component {
  render() {
    return (
      this.props.status === STATUSES.READY ? null :
      <div className="loader-div">
        <CircularProgress className="loader" />
      </div>
    );
  }
}

LoadingIndicator.propTypes = {
  status: PropTypes.string.isRequired,
};

这似乎不是检查它是否呈现的正确方法，但我明白了

  1) LoadingIndicator should not render when the status is READY:
     AssertionError: expected { Object (component, root, ...) } to be falsy

知道如何正确测试该组件是否根据给定的属性加载吗？

谢谢。

Answer 1

您好，最后我自己解决了这个问题。我应该考虑这样一个事实，因为我正在进行浅层渲染，所以我可以只查看 div 是否渲染，所以我最终得到:

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';

describe('LoadingIndicator', () => {
  it('should render when the status is FETCHING', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
    expect(wrapper.find('div')).to.have.length(1);
  });

  it('should not render when the status is READY', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.READY} />);
    expect(wrapper.find('div')).to.have.length(0);
  });
});

并且有效(针对两者进行了正面/负面测试)。