tag:blogger.com,1999:blog-11788780.post5643422448400149760..comments2023-12-29T13:22:33.104-08:00Comments on JJinuxLand: JavaScript: Some Tips for Using MobX's Provider with Enzyme, etc.jjinuxhttp://www.blogger.com/profile/03270879497119114175noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-11788780.post-92080393415179186112017-05-23T17:48:47.993-07:002017-05-23T17:48:47.993-07:00Let's suppose you have a component that makes ...Let's suppose you have a component that makes use of Provider:<br /><br />export default class PracticeTestStartPage extends Component {<br /> render() {<br /> return (<br /> <Provider courseTakingStore={ this.props.courseTakingStore }><br /> <div className="fullscreen db-sm fx-lc full-top-nav__scroll-wrapper"><br /> ...<br /> </div><br /> </Provider><br /> );<br /> }<br />}<br /><br />And you have a test like:<br /><br />it('renders page', () => {<br /> wrapper = shallow(<PracticeTestStartPage courseTakingStore={ courseTakingStore }<br /> startQuiz={ startQuiz } quiz={ quiz } />);<br /> expect(wrapper.text().includes('Best Practice Test Ever')).toBeTruthy();<br />});<br /><br />Since it uses shallow, it won't render the thing inside Provider. However, it's easy to work around that using:<br /><br />it('renders page', () => {<br /> wrapper = shallow(<PracticeTestStartPage courseTakingStore={ courseTakingStore }<br /> startQuiz={ startQuiz } quiz={ quiz } />);<br /> wrapper = wrapper.children().shallow();<br /> expect(wrapper.text().includes('Best Practice Test Ever')).toBeTruthy();<br />});jjinuxhttps://www.blogger.com/profile/03270879497119114175noreply@blogger.com