Jest and Enzyme - shallow rendering

Bar.js

import React from 'react';

const Bar = (props) => (
  <div className="hi">
    This is Bar
  </div>
);
export default Bar;

Foo.js

import React from 'react';
import Bar from './Bar';

const Foo = (props) => (
  <div className="hi">
    <Bar/>
  </div>
);
export default Foo;

Test.js

import React from 'react';
import {mount, shallow} from 'enzyme';

import Foo from '../Foo';
import Bar from '../Bar';

describe('A suite', function() {
  it('has one child component', function() {
    expect(mount(<Foo/>).children.length).toEqual(1);
  });

  it('has one class "hi"', function() {
    expect(mount(<Foo/>).find('.hi').length).toBe(1); // test fails with mount
  });

  it('has one class "hi"', function() {
    expect(shallow(<Foo/>).find('.hi').length).toBe(1); // test passed with shallow rendering
  });
});