React test-utils scryRenderedDOMComponentsWith *不遍历嵌套组件

时间:2017-12-07 21:40:50

标签: reactjs redux jsdom react-dom reactjs-testutils

测试组件时遇到问题。我有Voting组件呈现Vote组件,Vote组件呈现两个<button>标签。使用mocha + chai和react-dom / test-utils库,渲染到jsdom,我想测试两个按钮是否呈现。当我调用scryRenderedDOMComponentsWithTag(component, 'button'),传入子投票组件时,它会返回一个带有两个按钮的集合,但如果我传递了父节点(见下文),则返回空。我玩过其他scryRenderedDOMComponentsWith*方法和相同的结果。浏览器中的视觉检查显示按钮肯定是渲染。 scryRenderedDOMComponentsWith*函数不会遍历componentTree arg的子项吗?或者我做错了什么?

Voting.js

import React  from 'react'
import Vote   from './Vote'

const Voting = (props) => (
    <div>
      {
        <Vote {...props} />
      }
    </div>
)

export default Voting

Vote.js

import React from 'react'

class Vote extends React.Component {

  render() {
    return(
      <div className="voting">
        { this.props.pair.map(entry =>
          <button
            key={ entry }
          >
            <h1>{ entry }</h1>
          </button>
        )}
      </div>
    )
  }
}

export default Vote

Voting.spec.js

import React                  from 'react'
import ReactDOM               from 'react-dom'
import {
  renderIntoDocument,
  scryRenderedDOMComponentsWithTag,
  Simulate
}                             from 'react-dom/test-utils'

import { expect }             from 'chai'

import Voting                 from './Voting'

describe('Voting', () => {
  it('renders a pair of buttons', () => {
    const component = renderIntoDocument(
      <Voting pair={["Trainspotting", "28 Days Later"]} />
    )

    const buttons = scryRenderedDOMComponentsWithTag(component, 'button')

    expect(buttons.length).to.equal(2)
  })
})

测试输出

1) Voting
   renders a pair of buttons:

  AssertionError: expected 0 to equal 2
  + expected - actual

  -0
  +2

仅供参考,这是基于Full Stack Redux教程(http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html),我一直在跟踪进行必要的更改以使用当前的API,模式和库。我已经删除了逻辑以简化代码。在教程示例中,父Voting组件通过renderIntoDocument呈现为jsdom。在示例测试中,scryRenderedDOMComponentsWithTag被赋予父Voting组件作为其componentTree arg,并找到由子Vote组件呈现的按钮 - 所以我希望它应该在刮擦时遍历嵌套组件。

0 个答案:

没有答案