Tom Szpytman

Although the AAA method of structuring tests originally comes from the C# world, I’ve incorporated it into the way I write JS/TS tests, as I think it truly makes things more readable.

The basic principle is this; split your tests into blocks separated by ARRANGE , ACT , ASSERT comments.

Example:

// ARRANGE
const input1 = 1
const input2 = 1
const expectedOutput = 2
// ACT
const actualOutput = add(input1, input2)
// ASSERT
expect(expectedOutput).toEqual(actualOutput)

When I gloss over the above example, my eyes are immediately drawn to the ACT and ASSERT blocks, and when debugging, this makes it easy to understand where I should start my efforts.

Try it out for yourself!

--

--

Naturally, you might want to test components that are connected to a Redux store. Mocking is a simple way to go about injecting a Redux state into your components and creating deterministic tests.

Step 1: import react-redux in your test file:

import * as reactRedux from 'react-redux'

Step 2: spy…

--

--

You might argue that you shouldn’t place high-level components that rely on Redux into Storybook. Sometimes, however, it isn’t as easy as that.

The main problem that I’ve run in to is dispatching an initial state from useEffect doesn’t work from within stories. Worse still, if I create a wrapper…

--

--

One beauty of Redux is how extendable it is. You can easily create your own logging middleware, or middleware that pumps data into your analytics systems. I briefly want to outline the simple steps you need to take to get started.

Step 1: Create your middleware

import { Dispatch, Middleware…

--

--

Tom Szpytman

Tom Szpytman

Full-stack + Product. Available for hire either as an independent contractor, or as part of a voliyo.dev team. Inquiries: mail [at] voliyo.dev.