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

# Enhancing stories with add-ons 

The magic of Storybook is its extensibility in the form of assorted add-ons. There are abundant options for making your documentation richer through these handy plugins.

* Let’s start with the Actions add-on. This will add a panel to the bottom of the page for reporting events. We’ll use it to display `onIndexChange` events. Start by installing the add-on from npm:

  ~~~sh
  $ npm install --save-dev @storybook/addon-actions@4.1.11
  + @storybook/addon-actions@4.1.11
  ~~~

* Then create a new file called `.storybook/addons.js` and add this line to register the new add-on:

  ~~~
  // .storybook/addons.js
  import '@storybook/addon-actions/register';
  ~~~

  The webpack server watches existing files for updates, but won’t recognize new files, so you’ll need to restart it before continuing.

* Now add a bit of code to the `Carousel` story to tell the add-on to listen for `onIndexChange`:


import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Carousel from '../src/Carousel';
import slides from '../example/slides';

storiesOf('Carousel', module).add('default', () => (
  <Carousel slides={slides} onIndexChange={action('onIndexChange')} />
));

With that change, you should see a new “Action Logger” panel at the bottom of the example page. Every time `onIndexChange` fires, either because you clicked the Prev/Next buttons or because of the slides auto-advanced, the panel shows `onIndexChange` and the object that the listener received. It brings the API to life.

Let’s try one more add-on called Knobs. This one provides controls so that people can adjust the example’s props directly from the page. We’ll use it to make `autoAdvanceDelay` customizable.
Install it from npm:

~~~sh
$ npm install --save-dev @storybook/addon-knobs@4.1.11
+ @storybook/addon-knobs@4.1.11
~~~

As with the Actions add-on, Knobs requires you to register it:


Learn how to use add-ons with Storybook to further enhance your Docs.


Add-ons in Storybook

Learn how to use add-ons with Storybook to further enhance your Docs.

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

Add-ons in Storybook

Enhancing stories with add-ons