如何在react/redux应用程序中以笑话方式访问组件的子项

Question

我喜欢在Redux应用程序中测试Connect内部的组件:

this.component = TestUtils.renderIntoDocument(<Provider store={store}><Header path={this.path} /></Provider>);

我不知道如何在Provider中访问Header ...(因为我从CLI运行jest时无法在调试器中停止.

所以当我试图让一个孩子进入Header时

      const path = findDOMNode(self.component.refs.pathElemSpan);
      console.log("path="+path)

我在路上得到了不确定

有什么建议吗？

谢谢

Answer 1

使用enzyme,你有一堆很好的选择器来浏览你的虚拟DOM王国.:)

http://airbnb.io/enzyme/

一个访问组件的超级简单测试:

import { mount } from 'enzyme'
import Header from './header'

//... in your test
const wrapper = mount(<Provider store={store}><Header path='foo' /></Provider>)
const header = wrapper.find(Header).first()
expect(header.exists()).toBe(true)
// you can even check out the props
expect(header.prop('path')).toBe('foo')

此示例正在使用,mount但您也可以选择执行浅渲染.我强烈建议你喝点东西喝一点,然后阅读文档.;)