I defined some react components:
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>
}
}
And use enzyme to test it:
spec/hello-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;
});
});
Run test:
mocha --compilers js:babel-core/register --recursive spec
But the test is always fail.
If I verify a text in the Hello component it self, like:
wrapper.contains("Hello, I like:").should.be.true;
It will pass.
Is it expected behavior? How can I test text of inner components?
