如何在React/Redux应用程序中以玩笑方式访问组件的子级 | Redux应用程序中以玩笑方式访问组件的子级

本文介绍了如何在React/Redux应用程序中以玩笑方式访问组件的子级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I like to test a component inside Connect in a Redux app:

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

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

I have no idea about how to access Header inside Provider...(since I can not stop through in a debugger when running the jest from CLI.

所以当我试图在Header中生一个孩子

So when I tried to get a child inside Header

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

我在路径上未定义

有什么建议吗?

谢谢

推荐答案

使用enzyme，您可以使用许多不错的选择器来浏览虚拟DOM王国. :)

Use enzyme, you have a bunch of nice selectors to navigate through your virtual DOM kingdom. :)

http://airbnb.io/enzyme/

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

A super simple test to access your component:

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

This example is using mount but you also have the option to do shallow rendering. I highly recommend you grab something to drink and read the docs a little. ;)

这篇关于如何在React/Redux应用程序中以玩笑方式访问组件的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！