Redux Form and Typescript testing with React Testing Library

Igor Popov — Wed, 23 Feb 2022 10:55:34 +0000

Issue: write unit tests for Redux Form with Typescript.

Redux Form is an HOC (Higher-Order Component) that gives us a convenient way of managing the state of forms using Redux.

TL;DR

Unit tests for Redux Form usually consist of testing the correct rendering of the form and the correct interaction with the form.

Tests for rendering include rendering without initial values, rendering with initial values and rendering with some presetted values.

Interacting with a form changes its behaviour. It could be disabling fields, disabling buttons or adding something to the form.

For testing Redux Form we should first create a store. There are two ways to do it. The first is creating a mock store. It allows us to test a form with initial values and any other functionality, except submitting the form. To test submitting the form, we should use a real store.

Creating a mock store (source code of example):

import thunkMiddleware from 'redux-thunk'
import configureStore from 'redux-mock-store'
import { IStore } from '../store'

export const mockStoreFactory = (initialState: Partial<IStore>) =>
  configureStore([thunkMiddleware])({ ...initialState })

Here IStore is the interface for our real store:

export interface IStore {
  form: FormStateMap
}

The best and most convenient way for testing Redux Form is to import an unconnected form component and wrap it in reduxForm HOC:

const ReduxFormComponent = reduxForm<IFormData, IOwnProps>({
  form: 'LoginForm'
})(UnconnectedLoginForm)

Where types are:

export interface IFormData {
  username: string
  password: string
}

export interface IOwnProps {
  isLoading?: boolean
}

export type LoginFormProps = IOwnProps & InjectedFormProps<IFormData, IOwnProps>

Now we can do our first test for correct form rendering:

  it('should render username and password fields and buttons', () => {
    render(
      <Provider store={mockStoreFactory({})}>
        <ReduxFormComponent />
      </Provider>
    )

    expect(screen.getByText('Username')).toBeInTheDocument()
    expect(screen.getByText('Password')).toBeInTheDocument()
    expect(screen.getByPlaceholderText('Username')).toBeInTheDocument()
    expect(screen.getByPlaceholderText('Password')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Sign Up' })).toBeInTheDocument()
    expect(
      screen.getByRole('button', { name: 'Clear Values' })
    ).toBeInTheDocument()
  })

For testing preset values, we can use the function we created for producing a mock store:

  it('should render preseted initial values', () => {
    const onSubmit = jest.fn()

    const mockStore = mockStoreFactory({
      form: {
        LoginForm: { values: { username: 'Cartman', password: '1234' } }
      }
    } as unknown as IStore)

    render(
      <Provider store={mockStore}>
        <ReduxFormComponent onSubmit={onSubmit} />
      </Provider>
    )

    expect(screen.getByPlaceholderText(/username/i)).toHaveValue('Cartman')
    expect(screen.getByPlaceholderText(/password/i)).toHaveValue('1234')
  })

For testing a submitting form, we should use a real store:

  it('should call submit ones with setted values', () => {
    const onSubmit = jest.fn()

    // For test submit event we should use real store
    render(
      <Provider store={store}>
        <ReduxFormComponent onSubmit={onSubmit} />
      </Provider>
    )

    userEvent.type(screen.getByPlaceholderText(/username/i), 'Cartman')
    userEvent.type(screen.getByPlaceholderText(/password/i), '1234')
    userEvent.click(screen.getByRole('button', { name: 'Sign Up' }))

    expect(onSubmit).toHaveBeenCalledTimes(1)
    expect(onSubmit.mock.calls[0][0]).toEqual({
      username: 'Cartman',
      password: '1234'
    })
  })

We can create a store like this:

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'
import { FormStateMap } from 'redux-form'

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose
  }
}

export interface IStore {
  form: FormStateMap
}

const reducer = combineReducers({
  form: reduxFormReducer
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export const store = createStore(reducer, composeEnhancers(applyMiddleware()))

export default store

Summary:

For testing Redux Form with Typescript we should wrap an unconnected form in the types we use:

const ReduxFormComponent = reduxForm<IFormData, IOwnProps>({
  form: 'LoginForm'
})(UnconnectedLoginForm)

And after this we can render ReduxFormComponent wrapped into Provider like this:

  render(
    <Provider
      store={mockStoreFactory({
        form: {
          LoginForm: { values: { username: 'Cartman', password: '1234' } }
        }
      } as unknown as IStore)}
    >
      <ReduxFormComponent />
    </Provider>
  )

And test the UI like any other component:

    expect(screen.getByText('Username')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Sign Up' })).toBeInTheDocument()
    userEvent.click(screen.getByRole('button', { name: 'Sign Up' }))

You can find the source code of this example on my Github page: https://github.com/ip4422/redux-form-typescript-testing-rtl

Typescript for Redux Toolkit Slice

Igor Popov — Thu, 02 Sep 2021 14:49:38 +0000

The problem: Async action creator with TypeScript source code of example.

The Redux Toolkit is a great library for working with Redux. It allows us to solve the complexity of configuring the Redux store and reduce the amount of boilerplate code for building applications using Redux.
The Immer is used under the hood to facilitate reducers implementation. This saves us from having to control data mutations.
To implement asynchrony, the Redux Toolkit uses Redux Thunk.

TL;DR

Typing of Redux Toolkit async action creator is the most unobvious and difficult to understand part of Redux Toolkit.

This case should allow us to control arguments and return value. Here I describe each parameter for createAsyncThunk typing.

export const incrementAsync = createAsyncThunk<
  // Return type of the payload creator
  number,
  // First argument to the payload creator
  number,
  {
    // Optional fields for defining thunkApi field types
    rejectValue: string
  }
>('counter/fetchCount', async (amount, thunkApi) => {
  const response = await fetchCount(amount)
  if (response.data !== 5) {
    // The value we return becomes the `fulfilled` action payload
    return response.data
  } else {
    // For example we can return validation result here
    return thunkApi.rejectWithValue('Validation error! Response data was 5!')
  }
})

First type number is the return type of the payload creator.
Second type number is the first argument that will be passed to the payload creator. It is our amount value.
Third type is optional fields for defining thunkApi field types.

For this definition of async action creator we can handle returned value or error.

export const counterSlice = createSlice({
  extraReducers: builder => {
    builder
      .addCase(incrementAsync.pending, state => {
        state.status = counterStatus.pending
        state.error = ''
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = counterStatus.idle
        state.value += action.payload
        state.error = ''
      })
      // some error occurred while loading repository content
      .addCase(incrementAsync.rejected, (state, action) => {
        state.status = counterStatus.failed
        if (action.payload) {
          // For example this could be validation error handling
          state.error = action?.payload
        } else {
          state.error = action.error.message
        }
      })
  }
})

Payload creator for async Slice can provide some error with described type string. It was declared for rejectValue of createAsyncThunk typing. Using this sentence with Redux Toolkit automatically coerces the reducer part of the action payload type.

TL;DR

Summary:
This generic type allows us to use the type of our argument. The type of arguments passed is commented as First argument to payload creator.
In my case it’s a “number” but it can be anything. E.g. object, string, boolean etc. :

createAsyncThunk<
  // Return type of the payload creator
  number,
  // First argument to the payload creator
  number,
  {
    // Optional fields for defining thunkApi field types
    rejectValue: string
  }
>

DEV Community: Igor Popov

Redux Form and Typescript testing with React Testing Library

Summary:

Typescript for Redux Toolkit Slice

TL;DR

TL;DR