Skip to content

Instantly share code, notes, and snippets.

@mohammed-atif
Created Oct 25, 2020
Embed
What would you like to do?
React App Github Demo
import React from 'react';
const style = {
primary: {
padding: '8px',
alignContent: 'center',
backgroundColor: 'lightseagreen',
color: 'linen',
width: '200px',
},
secondary: {
padding: '8px',
alignContent: 'center',
backgroundColor: 'orange',
color: 'linen',
width: '150px',
},
};
const MyButton = (props) => {
const { text, onClick, type = 'primary' } = props
return (
<button onClick={onClick} style={style[type]}>
{text}
</button>
)
}
export default MyButton;
import { mount, render, shallow } from 'enzyme';
import MyButton from './MyButton';
describe('Renders the Button', () => {
it('Renders default as Primary', () => {
const wrapper = render(<MyButton />);
expect(wrapper).toBeDefined();
expect(wrapper).toMatchSnapshot();
});
it('Renders Primary', () => {
const wrapper = render(<MyButton type='primary' text='Hello' />);
expect(wrapper).toBeDefined();
expect(wrapper).toMatchSnapshot();
});
it('Renders Secondary', () => {
const wrapper = render(<MyButton type='secondary' />);
expect(wrapper).toBeDefined();
expect(wrapper).toMatchSnapshot();
});
it('Listens for button click', () => {
const mockListener = jest.fn();
const wrapper = shallow(<MyButton onClick={mockListener} />)
expect(wrapper).toBeDefined();
wrapper
.find('button')
.first()
.props()
.onClick();
wrapper.update();
expect(mockListener).toBeCalled();
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment