Last active
February 29, 2024 20:23
-
-
Save danmakenoise/c503854508f80137fe547943218ccc05 to your computer and use it in GitHub Desktop.
Unit Testing Children of React Context API Consumers with Enzyme
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
// Component.js | |
const Component = props => ( | |
<MyContext.Consumer> | |
{(context) => ( | |
<Foo | |
bar={props.bar} | |
baz={context.baz} | |
/> | |
)} | |
</MyContext.Consumer> | |
); | |
// Component.test.js | |
const outer = shallow(<Component bar="bar" />); | |
const Children = outer.props().children; | |
const wrapper = shallow(<Children baz="baz" />); | |
expect(wrapper.find(Foo)).toHaveLength(1); | |
expect(wrapper.find(Foo)).props().bar).toBe('bar'); | |
expect(wrapper.find(Foo)).props().baz).toBe('baz'); |
Solved my problem, thank you a lot!
Really nice, now I can continue using my snapshots in components with Context.Consumer!
Awesome solution! Found this after an hour of trying to figure out how to handle some tests and works great.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So simple, I love it. Thank you!