Fixed filterPokemonByType problem by creating separate function and write unit tests

src/features/Pokedex/Pokedex.tsx

@@ -4,6 +4,18 @@ import Filters from './Filters';
 import Loading from 'components/Loading';
 
 import { useAppSelector } from 'app/hooks';
+import { PokemonResponseData } from './types/api';
+
+export const filterPokemonByType = (
+  pokemonList: PokemonResponseData[],
+  selectedType: string,
+) => {
+  return pokemonList.filter(
+    pokemon =>
+      selectedType === 'All Types' ||
+      pokemon.types.some(type => type.type.name === selectedType),
+  );
+};
 
 const Pokedex = () => {
   const isLoadingPokemons = useAppSelector(
@@ -14,10 +26,7 @@ const Pokedex = () => {
 
   const pokemonList = useAppSelector(state => state.pokedex.pokemonList);
 
-  const filteredPokemonList = pokemonList.filter(pokemon => {
-    selectedType === 'All Types' ||
-      pokemon.types.some(type => type.type.name === selectedType);
-  });
+  const filteredPokemonList = filterPokemonByType(pokemonList, selectedType);
 
   return (
     <>

src/features/Pokedex/__test__/pokedex.test.ts

@@ -0,0 +1,44 @@
+import { filterPokemonByType } from 'features/Pokedex/Pokedex';
+import { PokemonResponseData } from 'features/Pokedex/types/api';
+import pokemon1 from 'features/Pokedex/__test__/pokemon1.json';
+import pokemon2 from 'features/Pokedex/__test__/pokemon2.json';
+import { AppDispatch, AppStore } from 'app/store';
+import { configureStore, Store } from '@reduxjs/toolkit';
+import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
+import { pokedexApi } from 'features/Pokedex/pokedexApi';
+import { listenerMiddleware } from 'app/listenerMiddleware';
+
+let store: AppStore;
+let dispatch: AppDispatch;
+describe('filterPokemonByType works correctly', () => {
+  beforeEach(() => {
+    store = configureStore({
+      reducer: {
+        pokedex: pokedexSlice.reducer,
+        [pokedexApi.reducerPath]: pokedexApi.reducer,
+      },
+      middleware: getDefaultMiddleware =>
+        getDefaultMiddleware().concat(
+          pokedexApi.middleware,
+          listenerMiddleware.middleware,
+        ),
+    });
+  });
+
+  const pokemonList: PokemonResponseData[] = [pokemon1, pokemon2];
+
+  it('should return all Pokemon if the selected type is "All Types"', () => {
+    const selectedType = 'All Types';
+    const filteredList = filterPokemonByType(pokemonList, selectedType);
+    expect(filteredList).toEqual(pokemonList);
+  });
+
+  it('should return only Pokemon of the selected type', () => {
+    const selectedType = 'fire';
+    const filteredList = filterPokemonByType(pokemonList, selectedType);
+    const allPokemonAreOfTypeFire = filteredList.every(pokemon =>
+      pokemon.types.some(type => type.type.name === selectedType),
+    );
+    expect(allPokemonAreOfTypeFire).toBe(true);
+  });
+});