Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

react.tar.gz

intro

intro-copy

ch3-something

generic

ch3-1

ch3-2

ch4-1

ch2-1

ch2-2

ch2-3

ch5-copy

intro-copy-wmhr0i

ch3-1-copy

ch4-1-copy

ch4-1-copy-2

generic-copy

ch4-copy

This course is a deep dive into testing in React. You will learn unit testing and integration testing using tools such as Jest and Enzyme. You will also learn about other tools such as ESlint, Prettier, Babel, Webpack, and Travis CI that add convenience for coding and testing.

Test-driven Development with React

# Adding Docs with Storybook 

Now that you’re sharing your project with the world, you should think about taking the documentation to the next level. Storybook has rapidly become a popular library for generating documentation pages for React components. Using Storybook, you can integrate live examples with all of the information devs need to take full advantage of your components.

## Getting started with Storybook

Here's how to get started with Storybook:

* Storybook has a handy script that you can run with `npx` to get started:

  ~~~sh
  $ npx -p @storybook/cli@4.1.11 sb init
  ~~~

  Once that script finishes, you’ll see that you have some new `devDependencies`:

  ~~~Json
  // package.json
  ...
  "devDependencies": {
    ...
    "@storybook/react": "^4.1.11",
    "@storybook/addon-actions": "^4.1.11",
    "@storybook/addon-links": "^4.1.11",
    "@storybook/addons": "^4.1.11"
  },
  ...
  ~~~

  And two new scripts:

  ~~~Json
  // package.json
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  ...
  ~~~

  The script also added two new directories, `.storybook` and `stories`. The `.storybook` directory contains configuration, and the `stories` directory is where your documentation will live. The script generated some placeholder documentation in `stories/index.stories.js`.

* Run the `storybook` script to start it up:

  ~~~sh
  $ npm run storybook

  Storybook 4.1.11 started
  4.96 s for manager and 4.63 s for preview

  Local:            http://localhost:6006/
  On your network:  http://192.168.0.173:6006/
  ~~~

  Under the hood, Storybook spun up a webpack server instance. Note that it’s using its own built-in configuration, not the `webpack.config.js` from the project root.

  Open the link to see the Storybook page. (In VS Code, you can open links shown in the integrated terminal by pressing <kbd>⌘</kbd> on macOS, and <kbd>⌃</kbd> on Windows and Linux.) You should see a nice welcome screen in your browser with a handy link to the Storybook documentation on writing stories.



* To see the `Carousel` component on this page, replace the placeholder documentation in `stories.index.js` with your own:


Learn how to use Storybook to add Docs to your project in this lesson.

Adding Docs with Storybook

Before We Begin

Test-Driven Development with Jest

Integrated Tooling with VS Code

Testing React with Enzyme

Styling in JavaScript with Styled-Components

Refactoring with Higher-Order Components

Continuous Integration and Collaboration

Conclusion

Adding Docs with Storybook

Adding Docs with Storybook