Part6a: Part 6 could use an update for tests

[erikstantoncarlson]

I noticed in part 6.a Pure functions, immutable it tells us to install jest and several other packages for testing. However part 5.c teaches us to use vitest.
Also part 6.a tells us to use .eslintrc.cjs which seems to be deprecated in favor of eslint.config.js.
Because it only shows part of .eslintrc.cjs, I don't know what the rest of the file is supposed to be.
I'm still working through part 6, so there may be more I haven't noticed yet.
Anyway, an update would be greatly appreciated.

[aayushsinha0706]

I have written an updated version of my own

Let's expand our reducer so that it can handle the change of a note's importance

{
  type: 'TOGGLE_IMPORTANCE',
  payload: {
    id: 2
  }
}

Since we do not have any code which uses this functionality yet, we are expanding the reducer in the 'test-driven' way.

Let's start by creating a test for handling the action NEW_NOTE.

We have to first configure the Vitest testing library for the project. Let us install the following dependencies:

npm install --save-dev vitest @babel/preset-env @babel/preset-react eslint-config-vitest-globals

Next we'll create the file .babelrc, with the following content:

{
    "presets": [
      "@babel/preset-env",
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
}

The .babelrc file is a configuration file for Babel, a popular JavaScript compiler used in frontend development. With presets like @babel/preset-env, Babel can transform modern JavaScript syntax and features into code that older browsers can understand. When using frameworks like React, presets such as @babel/preset-react (with the runtime set to "automatic") allow Babel to convert JSX syntax into standard JavaScript without needing to explicitly import React in every file.

Let us expand package.json with a script for running the tests:

{
   //... 
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest run"
  },
  //...
}

And finally, eslint.config.js needs to be altered as follows:

//...
import vitestGlobals from "eslint-config-vitest-globals/flat";


export default [
  vitestGlobals(),
  //....
];

Expand vite.config.js file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true
  }
})

To make testing easier, we'll first move the reducer's code to its own module, to the file src/reducers/noteReducer.js and import it in our App.jsx file

We'll also add the library deep-freeze, which can be used to ensure that the reducer has been correctly defined as an immutable function. Let's install the library as a development dependency:

npm install --save-dev deep-freeze

The test, which we define in file src/reducers/noteReducer.test.js, has the following content:

import noteReducer from "./noteReducer"
import deepFreeze from "deep-freeze"

describe('noteReducer', () => {
    test('returns new state with action NEW_NOTE', () => {
        const state = []
        const action = {
            type: 'NEW_NOTE',
            payload: {
                content: 'the app state is in redux store',
                important: true,
                id: 1
            }
        }

        deepFreeze(state)
        const newState = noteReducer(state, action)
        expect(newState).toHaveLength(1)
        expect(newState).toContainEqual(action.payload)
    })
})

Run the test with npm test. The deepFreeze(state) command ensures that the reducer does not change the state of the store given to it as a parameter.

The deepFreeze(state) function is used in the test to ensure the noteReducer doesn't mutate the original state

deepFreeze recursively freezes the entire state object/array and all nested properties. Any attempt to modify the state (e.g., state.push(...), state[0].content = ...) will throw a runtime error in strict mode.

By freezing the state, the test ensures the reducer adheres to Redux's core principle of immutability. The reducer must return a new state object instead of altering the original.

I hope this helps

[Yufan029]

In case someone come across this,

in 6a, when using jest to write the unit test, the article suggests make change for file .eslintrc.cjs like below.

module.exports = {
  root: true,
  env: { 
    browser: true,
    es2020: true,
    "jest/globals": true
  },
  // ...
}

since the eslint configuration file changed in previous lesson, the format changed a bit as well, please make the change in file eslint.config.js as below:

    languageOptions: {
      ecmaVersion: 2020,
      globals: {
        ...globals.browser,
        ...globals.jest,
      },

since the exercises (6.1 and 6.3) both start based on a cloned repository which has the configuration file like .eslintrc.cjs, so the instruction for modify the .eslintrc.cjs needs to be updated alongside with the repo as well.

Last, exercise 6.8, after refactor the component, there are still eslint error can be seen (red squiggly lines), which also can be disabled in .eslintrc.cjs like below:

 rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'react/prop-types': 'off'
  },

Also, there's a warning in the console, I think it can be ignored at this stage:
'Selector unknown returned the root state when called. This can lead to unnecessary rerenders.'

[vejol]

Thank you for opening issue! This has now been fixed. The material has been updated to use Vitest and eslint.config.js configuration file.