什么时候应该在酶/反应testing中使用渲染和浅层？
在发布这个问题之前，我试图在sqa stackexchange中进行search，但是我没有发现关于浅度和渲染的post，所以我希望有人能够帮助我。
什么时候应该使用浅层渲染testing反应组件？ 基于airbnb文档，我对这两者的区别提出了一些看法：
-
由于浅层是将组件作为一个单元进行testing，因此它应该用于“父”组件。 （例如表格，包装等）
-
渲染是针对子组件的。
我问这个问题的原因是我很难弄清楚我应该使用哪一个（虽然文档说他们非常相似）
那么，我怎么知道在一个特定的场景中使用哪一个呢？
根据酶文件 ：
完全DOM渲染的mount(<Component />)非常适合于那些可能与DOM apis交互的组件，或者可能需要完整的生命周期才能完全testing组件（例如componentDidMount等）的用例。
与
shallow(<Component />)进行浅层渲染对于限制自己将组件作为一个单元进行testing是有用的，并且确保您的testing不会间接地断言子组件的行为。
与
render ，用于渲染反应组件到静态HTML并分析生成的HTML结构。
您仍然可以在浅层渲染中看到底层的“节点”，例如，您可以使用AVA作为spec runner来做这样的事情（稍微做一些）：
let wrapper = shallow(<TagBox />); const props = { toggleValue: sinon.spy() }; test('it should render two top level nodes', t => { t.is(wrapper.children().length, 2); }); test('it should safely set all props and still render two nodes', t => { wrapper.setProps({...props}); t.is(wrapper.children().length, 2); }); test('it should call toggleValue when an x class is clicked', t => { wrapper.setProps({...props}); wrapper.find('.x').last().simulate('click'); t.true(props.toggleValue.calledWith(3)); });
注意渲染 ， 设置道具 ， 寻找select器 ，甚至合成事件都是浅显示支持的，所以大多数时候你可以使用它。
但是，你将无法获得组件的完整生命周期，所以如果你期望的事情发生在componentDidMount中，你应该使用mount(<Component />) ;
这个testing使用Sinon来监视组件的componentDidMount
test.only('mount calls componentDidMount', t => { class Test extends Component { constructor (props) { super(props); } componentDidMount() { console.log('componentDidMount!'); } render () { return ( <div /> ); } }; const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount'); const wrapper = mount(<Test />); t.true(componentDidMount.calledOnce); componentDidMount.restore(); });
以上不会通过浅显示或渲染
render将只提供给你的HTML，所以你仍然可以做这样的事情：
test.only('render works', t => { // insert Test component here... const rendered = render(<Test />); const len = rendered.find('div').length; t.is(len, 1); });
希望这可以帮助！
