Jest and Enzyme - shallow rendering

Bar.js

import React from 'react';

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

Foo.js

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

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

Foo.test.js

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

import Foo from '../Foo';

describe('A suite', function() {

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

  it('has class "foo"', function() {
    expect(mount(<Foo/>).find('.foo').length).toBe(1);
  });

  it('does not have class "bar"', function() {
    expect(mount(<Foo/>).find('.bar').length).toBe(0); // test failed using mount
  });

  it('does not have class "bar"', function() {
    expect(shallow(<Foo/>).find('.bar').length).toBe(0); // test passed with shallow rendering
  });
});