Question

我有一个React组件，我试图使用Enzyme / Jest进行测试。我试图弄清楚最合适的测试是什么来确保组件已经渲染。

我的组件有一个prop shouldRender，如果为false，将导致组件无法呈现。我的组件如下所示：

import React from 'react';

const propTypes = {
  shouldRender: React.PropTypes.bool,
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }

  render() {
    if (!this.props.shouldRender) {
      return null;
    }

    return (
      <div>
        <span>My component</span>
      </div>
    );
  }
}

MyComponent.propTypes = propTypes;

export default MyComponent;

我有一个看起来像这样的测试：

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

describe('MyComponent', () => {
  it('Should render if we want it to', () => {
    const component = shallow(<MyComponent shouldRender />);

    expect(component).toBeDefined(); // Passes
  });

  it('Should not render if we do not want it to', () => {
    const component = shallow(<MyComponent />);

    expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
  });
});

我希望第二个测试失败，因为组件没有渲染。有没有更好的方法来测试组件是否已呈现？

如果需要，请尽快提供更多信息。

谢谢！

Answer 1

所以我和一些人聊了聊，并决定我可能会采取错误的方式。

确定这是否由父组件呈现可能是一个更好的主意，否则任何时候我想使用MyComponent，我将不得不通过这个{{1}支持它。

shouldRender现在看起来像这样：

MyComponent

使用

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }

  render() {
    return (
      <div>
        <span>My component</span>
      </div>
    );
  }
}

MyComponent.propTypes = propTypes;

export default MyComponent;

的

和MyParentComponent如下所示：

MyComponent

不仅允许import React from 'react'; const propTypes = { myComponent: React.PropTypes.bool, }; class MyParentComponent extends React.Component { constructor(props) { super(props); this.state = { boz: 'baz', }; } render() { return ( <div> { this.props.myComponent && <MyComponent /> } </div> ); } } export default MyComponent;更可重用，而且还不再需要我想完全编写的测试。感谢所有看过这个的人。

Answer 2

我认为Jest的快照测试就是您所需要的。通过快速测试，当测试失败时，您可以检查它是否有意或无意更改。查看他们的示例here

测试React组件是否已呈现

2 个答案: