我花了一整天的时间深入研究 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)
})
});
最佳答案
如果导入您希望渲染 x 次的组件,您可以执行以下操作:
expect(wrapper.find(BudgetWidgetCard)).to.have.length(x);
关于reactjs - 使用 enzyme 在 react 测试中找到渲染子组件的数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48196057/