Last active
August 10, 2016 02:16
-
-
Save rodrigopr/42e8b832987ee9b8a09b05fa74b0cc18 to your computer and use it in GitHub Desktop.
snapshot testing with enzyme (hack)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Copyright 2004-present Facebook. All Rights Reserved. | |
/* eslint-disable no-unused-vars */ | |
'use strict'; | |
import React from 'react'; | |
import Link from '../Link.react'; | |
import { shallow } from 'enzyme'; | |
// not used, but need this import | |
import renderer from 'react-test-renderer'; | |
// No idea why this is required | |
jest.mock('react/lib/ReactDefaultInjection') | |
// trying to copy react-test-renderer logic | |
const toJson = (el) => { | |
const childrenToJson = (c) => ( | |
(c && c.type) ? toJson(c) : c | |
); | |
const { children, ... props } = el.props; | |
const childrenEls = | |
Array.isArray(children) | |
? children | |
: (children ? [children] : []); | |
return { | |
type: el.type.name || el.type, | |
props: props, | |
children: (childrenEls.length) ? childrenEls.map(childrenToJson) : null, | |
'$$typeof': Symbol.for('react.test.json') | |
}; | |
} | |
describe('Link', () => { | |
it('renders as an anchor when no page is set', () => { | |
const wrapper = shallow( | |
<Link>Facebook</Link> | |
); | |
const tree = toJson(wrapper.node); | |
expect(tree).toMatchSnapshot(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
exports[`Link renders as an anchor when no page is set 1`] = ` | |
<a | |
className="normal" | |
href="#" | |
onMouseEnter={[Function bound _onMouseEnter]} | |
onMouseLeave={[Function bound _onMouseLeave]}> | |
<LinkTitle | |
text="Facebook" /> | |
<LinkTitle | |
text="Another title" /> | |
</a> | |
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import LinkTitle from './LinkTitle.react'; | |
const STATUS = { | |
NORMAL: 'normal', | |
HOVERED: 'hovered', | |
}; | |
export default class Link extends React.Component { | |
constructor() { | |
super(); | |
this._onMouseEnter = this._onMouseEnter.bind(this); | |
this._onMouseLeave = this._onMouseLeave.bind(this); | |
this.state = { | |
class: STATUS.NORMAL, | |
}; | |
} | |
_onMouseEnter() { | |
this.setState({class: STATUS.HOVERED}); | |
} | |
_onMouseLeave() { | |
this.setState({class: STATUS.NORMAL}); | |
} | |
render() { | |
return ( | |
<a | |
className={this.state.class} | |
href={this.props.page || '#'} | |
onMouseEnter={this._onMouseEnter} | |
onMouseLeave={this._onMouseLeave} | |
> | |
<LinkTitle text={this.props.children} /> | |
<LinkTitle text="Another title" /> | |
</a> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
export default class LinkTitle extends React.Component { | |
render() { | |
return ( | |
<btn>{this.props.text}</btn> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment