testing-state-changes

Recipe: testing my state changes

This recipe shows how simple it is to test your state changes with simplux.

If you are new to simplux there is a recipe that will help you get started before you follow this recipe.

You can play with the code for this recipe in this code sandbox.

Before we start let's install simplux.

npm i @simplux/core -S

Now we're ready to go.

State changes in simplux are performed through mutations. Mutations are very simple to test as you will see. For this recipe we use a simple counter module with two mutations.

import { createMutations, createSimpluxModule } from '@simplux/core'

interface CounterState {
  counter: number
}

const counterModule = createSimpluxModule<CounterState>('counter', { value: 0 })

const counter = {
  ...counterModule,
  ...createMutations(counterModule, {
    increment: state => {
      state.value += 1
    },
    incrementBy: (state, amount: number) => {
      state.value += amount
    },
  }),
}

Let's start by testing our increment mutation. By default mutations will update their module's state when called. However, it is best to test our mutations in isolation with a specific state value. This can be done by using withState. When called this way the mutation does not affect the module's state at all.

const testState: CounterState = { value: 10 }

describe('increment', () => {
  it('increments the counter by one', () => {
    const result = counter.increment.withState(testState)
    expect(result.value).toBe(11)
  })
})

We can also use withState to test our mutations that take arguments.

describe('incrementBy', () => {
  it('increments the counter by the provided amount', () => {
    const result = counter.incrementBy.withState(testState, 5)
    expect(result.value).toBe(15)
  })
})

And that is all you need for testing your state changes with simplux.

By now you are certainly curious how simplux can help you in more complex scenarios. Our other recipes are an excellent starting point for this.