测试React组件是否已经渲染 [英] Test whether React component has rendered

问题描述

我有一个React组件，正在尝试使用Enzyme / Jest测试。我正在尝试找出最合适的测试是确保组件已呈现。

我的组件有一个道具 shouldRender ，如果为false，将导致组件无法渲染。我的组件看起来像这样：

const propTypes = {
shouldRender：React.PropTypes.bool，
};

类MyComponent扩展了React.Component {
构造函数（props）{
超级属性

this.state = {
foo：‘bar’，
};
}

render（）{
if（！this.props.shouldRender）{
返回null;
}

return（
< div>
< span>我的组件< / span>
< / div>
）;
}
}

MyComponent.propTypes = propTypes;

导出默认MyComponent;

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

  import从'react'进行React; 
从酶导入{浅}； 
从 ../MyComponent导入MyComponent； 
 
 describe（'MyComponent'，（）=> {
 it（'如果需要的话应该渲染'，（）=> {
 const component = （< MyComponent shouldRender />）; 
 
 Expect（component）.toBeDefined（）; //传递
}）; 
 
 it（'如果我们不希望它渲染，'，（）=> {
 const component = shallow（< MyComponent />）; 
 
 Expect（component）.not.toBeDefined（ ）; //不通过，因为组件未定义。
}）; 
}）; 
  

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

很高兴在需要时提供更多信息。

谢谢！

解决方案

所以我和一些人聊天，决定也许我

确定是否由上级组件呈现可能是一个更好的主意，否则我每次使用 MyComponent ，我将不得不将此 shouldRender 道具传递给它。

MyComponent 现在看起来像这样：

  import React from 反应； 
 
类MyComponent扩展了React.Component {
构造函数（props）{
超级属性
 
 this.state = {
 foo：‘bar’，
}; 
} 
 
 render（）{
 return（
< div> 
< span>我的组件< / span> 
< ; / div> 
）; 
} 
} 
 
 MyComponent.propTypes = propTypes; 
 
导出默认MyComponent; 
  

和 MyParentComponent 使用 MyComponent 看起来像这样：

  import从'react'进行React； 
 
 const propTypes = {
 myComponent：React.PropTypes.bool，
}; 
 
类MyParentComponent扩展了React.Component { 
 
 this.state = {
 boz：‘baz’，
}; 
} 
 
 render（）{
 return（
÷ div> 
 {this.props.myComponent&& 
< ; MyComponent /> 
} 
< / div> 
）; 
} 
} 
 
导出默认MyComponent； 
  

不仅允许 MyComponent 更大可重用，它消除了我想要完全编写的测试的需要。谢谢所有关注此内容的人。

I have a React component that I am trying to test using Enzyme/Jest. I am trying to figure out what the most appropriate test would be to ensure the component has rendered.

My component has a prop shouldRender that, if false, will cause the component to not render. My component looks like this:

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;

I have a test that looks like this:

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

I'd like the second test to fail, as the component isn't rendering. Is there a better way to go about testing whether or not a component has rendered?

Happy to provide any more information if it is needed.

Thanks!

解决方案

So I've had a chat to some people and decided that maybe I am going about this the wrong way.

It's probably a better idea to determine whether or not this gets rendered by the parent component, otherwise any time I want to use MyComponent, I am going to have to pass this shouldRender prop into it.

MyComponent now looks like this:

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;

and MyParentComponent that uses MyComponent looks like this:

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;

Not only does allow MyComponent to be more reusable, it removes the need for the test I wanted to write altogether. Thank you to everyone that looked at this.

这篇关于测试React组件是否已经渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！