Невозможно найти текст в узле

Question

Невозможно найти текст в узле в ферменте

У меня есть компонент Wallet, он подключен к магазину приставок, и я провожу тест в Wallet.test.js, и я хочу проверить, что компонент walllet содержит текст «Wallet balace: 20» в теге h3, но я получаю ошибку Метод «текст» предназначен для запуска на 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'