Tools

Here are the tools we have developed for our internal use, and open-sourced for the benefit of the community. We would also love to hear your feedback on those. We are also eager to review pull requests quickly, and make them evolve to fit perfectly.

react-doks

When developing a component, you often feel the need to :

• work on it in isolation, instead of beginning its implementation directly into the app,
• add a little words to document it,
• have a clear documentation about its external API (its props, namely),
• add it to some kind of component library shared across the team, so that everybody can see it in action and decide whether or not they should use it.

We didn't find any tool that allowed to easily integrate those four aspects of development into one unique workflow, so we developed our own tool. It's called react-doks, and it's great ! It includes nice features such as :

• markdown documentation with interactive code examples;
• automatic props table generator using JSDOC and propTypes (including the ones defined with Flow);

• component showcase to stage your component in isolation.

• NPM

• Github

Redux waitFor middleware : writing scenario tests and testing actions

A lightweight Redux middleware to wait for specific actions to be dispatched. Very useful for testing purposes, when executing some kind of scenario on a part of your app and needing to wait until the upcoming action has been dispatched. You may see it as a recorder, which exposes an async waitFor method, and a clean method to clear all recorded actions. It also gives you back the actions that were dispatched, so you can make assertions on their payloads.

• NPM
• Github

TryHard

In the same kind of use case as the previous one, we have often felt the need to wait until our interface was in the correct state when writing "scenario" integration tests, without control on the Redux actions being dispatched or on the timing. It takes as argument a function that throws an exception when the desired state is not achieved, and returns a Promise you can await in an async function.

• NPM
• Github