How to Read the Code Examples
This book takes a hands-on, project-driven approach, which means that source files often change over the course of a chapter. When a code example is a work in progress, its file name (relative to the project root) is shown as a comment at the top of the snippet:
| | // src/tests/MyComponent.test.js |
| | import React from 'react'; |
| | import MyComponent from '../MyComponent'; |
| | |
| | describe('MyComponent', () => { |
| | it('renders a <div /> tag', () => { |
| | const wrapper = shallow(<MyComponent />); |
| | expect(wrapper.type()).toBe('div'); |
| | }); |
| | }); |
As a source file changes over the course of a chapter, familiar sections are omitted with ... and new/edited lines are highlighted:
| | // src/tests/MyComponent.test.js |
| | ... |
| | |
| | describe('MyComponent', () => { |
| | ... |
| | |
| » | it('accepts a `className` prop', () => { |
| » | const wrapper = shallow(<MyComponent className="test-class" />); |
| » | expect(wrapper.hasClass('test-class')).toBe(true); |
| » | }); |
| | }); |
The final version of a source file within a chapter has a download link at the top instead of a comment:
| | import React from 'react'; |
| | import MyComponent from '../MyComponent'; |
| | |
| | describe('MyComponent', () => { |
| | it('renders a <div /> tag', () => { |
| | const wrapper = shallow(<MyComponent />); |
| | expect(wrapper.type()).toBe('div'); |
| | }); |
| | |
| | it('accepts a `className` prop', () => { |
| | const wrapper = shallow(<MyComponent className="test-class" />); |
| | expect(wrapper.hasClass('test-class')).toBe(true); |
| | }); |
| | |
| » | it('triggers `onClick` when clicked', () => { |
| » | const onClick = jest.fn(); |
| » | const wrapper = shallow(<MyComponent onClick={onClick} />); |
| » | wrapper.simulate('click'); |
| » | expect(onClick).toHaveBeenCalled(); |
| » | }); |
| | }); |
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.