An Easier Way to Generate Recoil Tests ft. Chromogen

A simplified way of writing React + Jest tests

You’re a developer working on a Recoil application, and you want to write unit tests to ensure reliability and prevent regression. These tests should reflect how users interact with the application to guarantee each line of code is performing how it should. However, writing meaningful tests can be tedious and time-consuming, but it’s required in your application.

Imagine if there was a way to simplify this process, so that as a developer, you could just sit back and watch those green checkmarks appear automatically. With Chromogen, you can!

What is Recoil?

In March 2020, Facebook released Recoil, a simple and performant new state management library designed to share state with React. It’s lightweight, easy to learn, and rapidly rising in popularity among developers due to minimal boilerplate code. All you need to manage global state in a Recoil application are atoms and selectors. Atoms carry an individual unit of state, while selectors are pure functions that use atoms (or other selectors) to represent derived state.

Since Recoil is so new, there are very few testing tools available for it currently. To solve this issue, we developed Chromogen.

What is Chromogen?

Chromogen is a Jest unit-test generation tool for Recoil selectors. It captures state changes during user interaction and auto-generates corresponding test suites as a downloadable file. It generates tests to ensure your Recoil atoms and selectors render, update, and set state properly.

Chromogen will track atom and selector functions in Recoil apps

Inside your application, you can import atoms and selectors from Chromogen instead of Recoil. Chromogen then listens for changes in atom and selector calls and keeps track of them inside a ledger. The data is passed into our test-composing algorithm used to generate and export a tests file.

You can then import the downloaded file into their testing directory, run tests, and watch those green checkmarks appear!

Oddly satisfying…

Cool, So How Can I Use It in My App?

After installing our published npm package inside your Recoil application, nest Chromogen’s wrapper component within a RecoilRoot and update your Recoil imports.

import React from 'react';
import { RecoilRoot } from 'recoil';
import { ChromogenObserver } from 'chromogen';
import MyComponent from './components/MyComponent.jsx';

const App = (props) => (
    <RecoilRoot>
      <ChromogenObserver />
      <MyComponent {...props} />
    </RecoilRoot>
)

export default App;

After that, Chromogen will automatically display two buttons on the bottom-left of your application. It will automatically record, so run your application as you normally would, and download once you are finished. Now you have a test file you can use to run tests!

Look at all those tests!

Alternatively, we also have a chrome dev tool extension that can be utilized in case the buttons interfere with your application.

Now Compatible with React Hooks! (Beta)

Let’s say that you’re using a useState Hook inside your application, and you want to test that state is updating properly with each set state function. With Chromogen’s latest update, users are now able to test useState in addition to atoms and selectors! Simply wrap your App component within a Hooks ChromogenObserver component and import our useState hook from Chromogen.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import { HooksChromogenObserver } from 'chromogen';
 
ReactDOM.render( 
    <HooksChromogenObserver name="App"> 
       <App /> 
    </HooksChromogenObserver> 
  document.getElementById('root'), 
);

Be sure to pass in a second parameter as an id for your hook. This allows Chromogen to track state changes and generate tests using your specified hook. Under the hood, Chromogen is mimicking useState’s native functionality to record user input and manual changes of state.

import React from 'react'; 
import { useState as hooksUseState } from 'chromogen'; 
const App = () => (
    const [elements, setElements] = hooksUseState([0], "id"); 
    return (...)
)
export default App;

Note: Currently, only one useState hook can be tracked at a time.

Ready to Check out Chromogen?

Chromogen is an open-source tool built by a small team of passionate engineers who love test-driven-development and all things React. We welcome you to try out Chromogen, leave feedback and open issues for us on Github!

Check out our official website at chromogen.dev!

Contributors: Amy Yee, Jinseon Shin, Nicholas Shay, Cameron Greer, Ryan Tumel