测试组件时遇到问题。我有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
组件呈现的按钮 - 所以我希望它应该在刮擦时遍历嵌套组件。