Testing styled Material UI components with Enzyme

01-simple.test.js

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

const Item = text => <p>Item {text}</p>;

const Composition = ({ showB }) => (
  <p>
    <Item text="A" />
    {showB && <Item text="B" />}
  </p>);

describe('<Composition />', () => {
  it('should render one item if showB is set to false', () => {
    const wrapper = shallow(<Composition showB={false} />);
    expect(wrapper.find(Item)).toHaveLength(1);
  });
  it('should render two items if showB is set to true', () => {
    const wrapper = shallow(<Composition showB />);
    expect(wrapper.find(Item)).toHaveLength(2);
  });
});

02-simple-material.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { CircularProgress } from 'material-ui-next/Progress';

const Composition = () => (
  <p>
    <CircularProgress size={24} />
  </p>);

describe('<Composition />', () => {
  it('should render a CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    expect(wrapper.find(CircularProgress)).toHaveLength(1);
  });
});

03-simple-material-withstyles.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { CircularProgress } from 'material-ui-next/Progress';
import { withStyles } from 'material-ui-next/styles';
import PropTypes from 'prop-types';

const style = {
  buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
  },
};

const Composer = ({
  classes,
}) => (
  <p>
    <CircularProgress size={24} className={classes.buttonProgress} />
  </p>);


Composer.propTypes = {
  classes: PropTypes.object.isRequired,
};

const Composition = withStyles(style)(Composer);

describe('<Composition />', () => {
  it('should render a styled CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    // Note the use of dive() because Composition is now wrapped by the withStyles higher order component.
    expect(wrapper.dive().find(CircularProgress)).toHaveLength(1);
  });
});

04-simple-material-withstyles-using-createshallow.test.js

import React from 'react';
import { CircularProgress } from 'material-ui-next/Progress';
import { createShallow } from 'material-ui-next/test-utils';
import { withStyles } from 'material-ui-next/styles';
import PropTypes from 'prop-types';

const style = {
  buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
  },
};

const Composer = ({
  classes,
}) => (
  <p>
    <CircularProgress size={24} className={classes.buttonProgress} />
  </p>);


Composer.propTypes = {
  classes: PropTypes.object.isRequired,
};

const Composition = withStyles(style)(Composer);

describe('<Composition />', () => {
  const shallow = createShallow();

  it('should render CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    // Still need to dive().
    expect(wrapper.dive().find(CircularProgress)).toHaveLength(1);
  });
});

05-simple-material-withstyles-using-mount.test.js

import React from 'react';
import { CircularProgress } from 'material-ui-next/Progress';
import { mount } from 'enzyme';
import { withStyles } from 'material-ui-next/styles';
import PropTypes from 'prop-types';

const style = {
  buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
  },
};

const Composer = ({
  classes,
}) => (
  <div>
    <CircularProgress size={24} className={classes.buttonProgress} />
  </div>);


Composer.propTypes = {
  classes: PropTypes.object.isRequired,
};

const Composition = withStyles(style)(Composer);

describe('<Composition />', () => {
  it('should render CircularProgress', () => {
    const wrapper = mount(<Composition />);
    // No longer need to dive().
    expect(wrapper.find(CircularProgress)).toHaveLength(1);
  });
});