Skip to content

Instantly share code, notes, and snippets.

@a-h
Last active December 31, 2023 09:07
Show Gist options
  • Save a-h/21df0f432ae02a6dfed941debb0e5950 to your computer and use it in GitHub Desktop.
Save a-h/21df0f432ae02a6dfed941debb0e5950 to your computer and use it in GitHub Desktop.
Testing styled Material UI components with Enzyme
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);
});
});
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);
});
});
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);
});
});
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);
});
});
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);
});
});
@lane-eb
Copy link

lane-eb commented Oct 9, 2020

Thanks very much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment