Unit testable components pt.4: Testing the Redux data flow

Testing actions within actions

Testing redux is verbose. Sometimes it is even difficult. But it doesn't matter where you do it. It will always be challenging. The difference is that the DOM is irrelevant for my approach to testing.

I use redux-mock-store to test my actions. No need for enzyme. One less moving part to deal with. That is the whole point of this testing style. Here is what a sample test would look like

The action process 

            
const processHomeMount = () =>
    async (dispatch, getState) => {
        try {
            const type = getState().home.topSearches.focusedDateRange
            const { endDate, startDate } = createPresentDateRange({ daysAgo: 100 })
            await Promise.all([
                dispatch(fetchPopularSearches({ type, limit: TOP_SEARCH_ENTRY_COUNT })),
                dispatch(fetchNews({ startDate, endDate }))
            ])
        } catch (error) {
            return new Error(error)
        }
    }

Imports 

            
// middleware to be passed into mocked store
import thunk from 'redux-thunk'
// action testing npm package
import configureStore from 'redux-mock-store'

import {
    getPopularSearches,
    getNews,
} from "Api/ApiCalls/HomeApi/HomeApi"

Mocks 

            
// mock the functions so I can use returnValueOnce
jest.mock('Api/ApiCalls/HomeApi/HomeApi')

// api call return value mock
getPopularSearches.returnValueOnce(popularSearchesPayload)
getNews.returnValueOnce(newsPayload)

// setting up my mock store that dispatches actions and keeps track of emitted actions
const initialState = {}
const middleware = [thunk]
const mockStore = configureStore(middleware)(initialState)

Assertion 

            
const processHomeMountExpectedActions = [
    {
        news: [{
            content: `Welcome to my app!`,
            createdAt: '2018-12-06T07:47:51.119Z',
            id: 2,
            title: 'sample news entry!',
            version: null
        }],
        type: 'SET_NEWS'
    },
    {
        type: 'SET_FOCUSED_TOP_SEARCH',
        focusedDateRange: 'week',
    },
    {
        type: 'SET_TOP_SEARCH_ENTRIES',
        entries: [{name: 'the office'}]
    },
]

describe('processHomeMount', () => {
    beforeEach(() => {
        // remove all actions from mockStore before each assertion in test file
        mockStore.clearActions() 
    })
    it('dispatches expected objects', () => {
        mockStore.dispatch(processHomeMount())
        const emittedActions = mockStore.getActions() // array of all actions run
        expect(emittedActions).toEqual(processHomeMountExpectedActions)
    })
})

All done

There you have it. Test Redux and React components in their own respective environments. Use enzyme to test components and redux-mock-store for your business logic. Not both at once.

Comments

Post a Comment

Popular posts from this blog

Contrasting var and ES6s new declarations: let and const

let and const are two new declaration types in JavaScript, which have the ability to completely replace var declaration. To use them effectively, and understand why they can be a direct replacement, it's important to understand how they work. var is function scoped. It is hoisted and initialized at the top var , regardless of where it is assigned, will become declared and initialized at the beginning of the function. This means that any variable you declare will be available everywhere inside the function. This process is referred to as hoisting. Hoisted variables with var are declared and initialized at the top of the function, but have no value All variables that are declared and initialized with var are initialized as undefined . They have no value until you reach the line of code that assigns it a value. const undefinedConsoleLog = _ => { console.log(sadlyUndefined) //undefined var sadlyUndefined = 'declared by var, und
Read more

Modularity vs. Abstraction. Which is More Important?

Coupling? Bad. Coupling is the enemy of modularity. Coupling creates the need to understand the inner workings (implementation details) of multiple functions/objects/entities in order to understand what the code is doing. Abstractions? Good. Abstractions are a natural concept in this world. I do not need to understand how a car works in order to drive mine. In programming, being able to use functions and components without understanding their inner workings is a sign of well-designed abstraction. A clear and tight interface that is easy to work with is a sign of good code. Good modularity with bad abstractions? Could be better. It's not fun to read, but at least you know where everything is. This tends to create large components and classes, but I see it as the lesser of two possible evils. Bad modularity with good abstractions? The worst spaghetti possibl
Read more

Unit testable components pt.3: Testing components

My approach to component testing There are multiple resources that show how to test components. When you read between the lines, they are actually describing their philosophy on how a component should be tested. My tests are basic and practical because my components are dumb My components have the following properties No api calls Small encapsulated components Minimal Redux actions As a consequence, my tests have the following principles Shallow mount component directly. Ignore Redux's connect higher order function (HOF) in test
Read more