使用酶在反应测试中查找渲染子组件的数量?
Posted
技术标签:
【中文标题】使用酶在反应测试中查找渲染子组件的数量?【英文标题】:Finding the number of rendered child components in react test using enzyme? 【发布时间】:2018-06-20 03:11:39 【问题描述】:我花了一整天时间研究 Enzyme 文档并开始掌握基础知识。
我正在循环访问我的 Redux 存储中的一些数据,以将这些嵌套的 <BudgetWidgetCard />
组件渲染到我的父组件中,并希望确保其中的 X
被渲染到页面。
组件示例
<div>
<main className="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1 name='main-header-title'>metaProperties.pageTitle</h1>
budgetWidgets.map((widget, i) =>
return <BudgetWidgetCard className='budget-widget' title=widget key=i state=this.props />
)
</main>
</div>
测试方法
it('+++renders the budget widget items correctly', () =>
console.log(wrapper.children().children().filter('budget-widget').length)
console.log(wrapper.find(<BudgetWidgetCard />).forEach(child =>
console.log(child.text())
))
)
我不喜欢调用 children().children()... 的想法似乎是紧密耦合的,但也许这就是可行的方法。我的最终目标是简单地说明componentA
的浅层渲染具有X
的<BudgetWidgetCards />
数量
我得到以下输出:
Review Current Budget<BudgetWidgetCard /><BudgetWidgetCard /><BudgetWidgetCard /><BudgetWidgetCard />Add A New Budget Item<ReduxForm /><BudgetTable />
使用以下内容时:
wrapper.children().forEach(child=>
console.log(child.text())
)
测试文件
import React from 'react'
import shallow, mount from 'enzyme';
import renderer from 'react-test-renderer'
// import configureStore from 'redux-mock-store'
import Provider from 'react-redux'
import createStore from 'redux'
import MemoryRouter as Router, withRouter from 'react-router-dom';
import configure from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureStore from '../src/configuration/store';
configure( adapter: new Adapter() );
/**
BUDGET COMPONENTS
**/
import Budget from '../src/Budget/components/Budget';
import BudgetWidgetCard from '../src/Budget/components/Budget';
let mainHeaderTitle = 'Review Current Budget';
const store = configureStore();
const wrapper = shallow(<Budget />);
// Snapshot for Budget React Component
describe('>>>B U D G E T --- Snapshot',()=>
it('+++capturing Snapshot of Budget', () =>
const wrapper = shallow(<Budget />);
expect(wrapper).toMatchSnapshot();
)
);
describe('>>>B U D G E T --- Elements Getting Rendered Correctly',()=>
it('+++correct title is getting rendered as header', () =>
expect(wrapper.find('h1[name="main-header-title"]').text()).toEqual(mainHeaderTitle);
)
it('+++renders the budget widget items correctly', () =>
expect(wrapper.children().find(BudgetWidgetCard).length).toEqual(4)
)
);
【问题讨论】:
【参考方案1】:如果您导入您希望渲染 x 次的组件,您可以这样做:
expect(wrapper.find(BudgetWidgetCard)).to.have.length(x);
http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
【讨论】:
嗯。我也在使用 Jest,但也许我仍然做错了。期望(wrapper.find(BudgetWidgetCard).length).toEqual(4) 以上长度为0 那么你的包装器没有找到 BudgetWidgetCard 的任何实例 我在我的快照中的 props 下看到了它们:Object "children" : 附言。使用console.log(wrapper.debug())
将帮助您在尝试找出实际渲染到测试中的内容时没有尽头,而不是多个孩子的日志等。每当我在浅渲染测试中愚蠢地忘记 HOC 时,特别有助于发现!
【参考方案2】:
只需在 ReactWrapper
实例上调用 .length
。
wrapper.find('button.nice').length
https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/length.md
【讨论】:
【参考方案3】:除了上述所有内容。
有expected behavior, that ".find" has more length than expected items
为了找到长度,有问题的开发者建议使用
wrapper.find('button.nice').hostNodes()
但唯一对我有用的解决方案是
wrapper.find('button.nice').children()
【讨论】:
【参考方案4】:我将讨论问题的标题而不是正文,因为其他人已经详细讨论了此处描述的具体场景,但我希望关注问题的更广泛方面,即计数children
:
Enzyme children()
方法允许这样做。
返回一个新的包装器,其中包含当前包装器中节点的所有子节点。可选地,可以提供一个选择器,它将通过此选择器过滤子项
例如:
const wrapper = mount(<ToDoList items=items />);
expect(wrapper.children()).to.have.length(items.length);
假设<ToDoList>
组件返回一个元素,其中包含不同数量的子元素。
【讨论】:
以上是关于使用酶在反应测试中查找渲染子组件的数量?的主要内容,如果未能解决你的问题,请参考以下文章