酵素 `mount`が内部の構成要素にテキストを見つけることができないのはなぜですか？

Question

私はいくつかのコンポーネントが反応する定義された：

のsrc/hello.jsx

import React from 'react'; 
import Box from './box.jsx'; 

class Hello extends React.Component { 
    render() { 
    const {fruit} = this.props; 
    return <div> 
     <h1>Hello, I like:</h1> 
     { 
     fruit.map((name, index) => <Box name={name} key={index}/>) 
     } 
    </div> 
    } 
} 

export default Hello; 

のsrc/box.jsx

import React from 'react'; 

export default class Box extends React.Component { 
    render() { 
    const {name} = this.props; 
    return <div>Box: {name}</div> 
    } 
} 

そして、それをテストするためにenzymeを使用します。

spec /ハローspec.js

import React from 'react'; 
import Hello from '../src/hello.jsx'; 
import chai from 'chai'; 
import spies from 'chai-spies'; 
import {mount} from 'enzyme'; 
import jsdomGlobal from 'jsdom-global'; 

jsdomGlobal(); 

chai.should(); 

describe('<Hello />',() => { 

    it('shows names in inner components',() => { 
    const wrapper = mount(<Hello fruit={['AAA', 'BBB']}/>); 
    // AAA will be rendered by inner components 
    wrapper.contains("AAA").should.be.true; 
    }); 

}); 

ランテスト：

mocha --compilers js:babel-core/register --recursive spec 

しかし、テストは失敗し、常にあります。

ように私は、Helloコンポーネントも自己内のテキストを確認した場合：それは通過します

wrapper.contains("Hello, I like:").should.be.true; 

。

予想される動作ですか？内部コンポーネントのテキストをテストするにはどうすればよいですか？

Answer 1

おそらくwrapper.text().to.have.string('AAA');となりますか？