Testing with JEST: Setting Up Automated Testing for Redux

Before diving deeper into Redux, it's crucial to ensure that our code is reliable and maintainable. In this lecture, we'll move our testing into an external file using JEST. By the end of this lecture, you will be able to build test cases to validate that your code doesn't break when you make updates.

Why Testing Matters

Testing is an integral part of software development, as it ensures that the application behaves as expected, even as new features are added or changes are made. In this lecture, we'll focus on testing our reducers using JEST.

JEST is a powerful JavaScript testing framework that comes pre-installed with Create React App. We'll use it to write tests that validate our Redux reducers and ensure that they work correctly.

Setting Up JEST

To start, let's create a test file for our Redux store. We'll name this file store.test.js and use it to write our tests.

First, we'll export our reducer and action constants from the store.js file:

// store.js
export const STEP_UP = 'STEP_UP';
export const STEP_DOWN = 'STEP_DOWN';
export default function counter(state = 0, action) {
  switch (action.type) {
    case STEP_UP:
      return state + 1;
    case STEP_DOWN:
      return state - 1;
    default:
      return state;
  }
}

Writing Our First Test

In store.test.js, we will import the counter function, along with the constants STEP_UP and STEP_DOWN. Here's how we can create our first test:

// store.test.js
import counter, { STEP_UP, STEP_DOWN } from './store';

describe('Counter Reducer', () => {
  it('should increment state from 0 to 1', () => {
    const result = counter(0, { type: STEP_UP });
    expect(result).toBe(1);
  });

  it('should decrement state from 1 to 0', () => {
    const result = counter(1, { type: STEP_DOWN });
    expect(result).toBe(0);
  });
});

Breaking Down the Code

1. Importing the Reducer and Action Types: We import the counter reducer, as well as the STEP_UP and STEP_DOWN action constants, to use them in our test cases.
2. Writing Tests with describe and it: We use describe to group related test cases and it to define individual test scenarios.
3. Assertions with expect: The expect function allows us to assert that the value returned by the reducer matches the expected value.

Running the Tests

To run the tests, use the following command in your terminal:

npm run test

This command will run all the tests in your project, including the ones we've just created for the Redux reducer.

If all tests pass, you'll see output indicating that all tests have succeeded. If any test fails, JEST will provide a detailed error message that points out what went wrong, making it easier to debug.

Conclusion

By moving our tests to an external file and using JEST, we are ensuring that our reducers work as expected. Testing gives us confidence that our code will continue to function correctly as our application evolves. In the next lecture, we will continue integrating Redux into our application and expanding our testing suite.

Happy testing!