使用酶查找反应测试中渲染的子组件的数量？

Question

我花了一整天时间潜入Enzyme docs并开始掌握基础知识。

我正在循环浏览我的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).toE‌​qual(4)
    })
});

Answer 1

如果您导入要渲染x次的组件，则可以执行此操作：

expect(wrapper.find(BudgetWidgetCard)).to.have.length(x);

http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

Answer 2

只需在d2$stud2 <- factor(d2$stud2, levels=levels(d1$stud)) d2$mark2 <- ifelse(d2$stud2 == d1$stud, d1$mark, NA) 实例上调用 stud2 。

.length

https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/length.md

Answer 3

我将讨论问题的标题而不是正文，因为其他人已经非常详细地讨论了此处描述的特定场景，但我希望关注问题的更广泛的方面，即计算 {{1} }：

Enzyme children() 方法允许这样做。

<块引用>

返回一个新的包装器，其中包含当前包装器中节点的所有子代。可选地，可以提供一个选择器，它将通过这个选择器过滤子项

例如：

children

假设 const wrapper = mount(<ToDoList items={items} />); expect(wrapper.children()).to.have.length(items.length); 组件返回一个元素，其中包含不同数量的子元素。

Answer 4

除上述所有内容之外。

有expected behavior, that ".find" has more length than expected items

要找到长度，建议有问题的开发人员使用

wrapper.find('button.nice').hostNodes()

但只有对我有用的解决方案

wrapper.find('button.nice').children()