Question

无法在酶的节点上找到文本

我有一个Wallet组件，它已连接到redux商店，并且正在Wallet.test.js中运行测试，我想检查一下walllet组件在h3标签处是否包含文本“ Wallet balace：20”，但我出现错误方法“文本”应在1个节点上运行。改为找到0。

Wallet.js --->

import React from 'react'
import {connect} from 'react-redux'

class Wallet extends React.Component {
    render(){
        return(
            <div>
                <h3 className='balance' >Wallet balance: {this.props.balance}</h3>
            </div>
        )
    }
}
function mapStateToProps(state) {
    return {
      balance: state.balance
   }
}
export default connect(mapStateToProps,null)(Wallet)

Walltet.test.js ---->

import React from 'react'
import {shallow} from 'enzyme'
import Wallet  from './Wallet'

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });


describe('Wallet',()=>{
    const props = {balance:20}
    const wallet = shallow(<Wallet {...props} />)

    it('renders properly', ()=>{
       expect(wallet).toMatchSnapshot()  
    })

    it('display the balance from props',()=>{
        expect(wallet.find('.balance').text()).toEqual('Wallet balance: 20')
    })
})

测试结果：-

●钱包›显示道具的余额

方法“文本”应在1个节点上运行。改为找到0。

Answer 1

您正在导出连接的HOC，并且浅色渲染仅渲染第一层，因此它将是Wallet及其道具，您可以通过以下两种方法解决此问题： 1.还要导出Wallet组件并对其进行浅化渲染

export class Wallet extends React.Component {

并处于测试状态

import Wallet, { Wallet as WalletComponent }  from './Wallet'

或使用将执行深度渲染的mount方法：

import { mount } from 'enzyme'

在节点上找不到文本

1 个答案: