reactjs - 如何在react/redux应用程序中以jest方式访问组件的子组件

Question

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

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

我不知道如何访问提供程序内部的 header ，因为从 CLI 运行 Jest 时我无法在调试器中单步执行。

当我试图让一个 child 进入标题时

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

我的路径未定义

有什么建议吗？

Answer 1

使用enzyme，您将拥有一堆不错的选择器来导航您的虚拟 DOM 王国。 :)

http://airbnb.io/enzyme/

访问组件的 super 简单测试:

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，但您也可以选择进行浅层渲染。我强烈建议您喝点东西并阅读一下文档。 ;)