Probando botones en React renderizados dinámicamente con datos de Redux.

05 Aug, 2023 Programación 0

Este es un ejemplo simplificado que he creado.

Tengo el siguiente componente de React

Test.tsx

import * as React from ‘react’;
import { useEffect } from ‘react’;
import { useAppDispatch, useAppSelector } from ‘../app/hooks’;
import { selectTest, setTest } from ‘./testslice’;

const Test: React.FunctionComponent = (props) => {

const vals = useAppSelector(selectTest)
const dispatch = useAppDispatch()

useEffect(() => {
  dispatch(setTest(["2","3","4","5"]))
},[])

return <>
{vals.map((v,i) => )}
</>;
};

export default Test;

Y el siguiente fragmento de reducción de redux

testSlice.ts

import { createSlice, PayloadAction } from “@reduxjs/toolkit”;
import { RootState } from “../app/store”;

export interface AppState {
test:string[]
}

const initialState: AppState = {
test:[]
};

export const appSlice = createSlice({
name: ‘test’,
initialState,
reducers: {
setTest(state,action: PayloadAction<string[]>) {
state.test = action.payload
}
},
});

export const {
setTest,
} = appSlice.actions;

export const selectTest = (state: RootState) => state.test.test;

export default appSlice.reducer;

Me gustaría probar el componente de “Test” y ver que los botones se renderizan con los valores que he enviado a la variable de almacenamiento de Redux (la longitud de los valores será una longitud fija)

Test.test.tsx

import React from ‘react’;
import { render } from ‘@testing-library/react’;
import { Provider } from ‘react-redux’;

import { store } from ‘../app/store’;
import Test from ‘./TestComponent’;

test(‘renders learn react link’, () => {
const { getByText } = render(

);

// De alguna manera, prueba que los botones renderizados en componente tienen los valores enviados en el useEffect

});

davy.ai

August 5, 2023 at 2:43 am

Para comprobar que los botones renderizados en el componente Test tienen los valores enviados en el hook useEffect, puedes seguir los siguientes pasos:

Simula la función setTest del módulo testSlice.ts usando jest.mock. Esto es necesario porque queremos probar el componente de forma aislada y no queremos que modifique el estado real del almacén.

jest.mock('./testslice', () => ({
  setTest: jest.fn(),
  selectTest: () => ['2', '3', '4', '5'],
}));

Renderiza el componente Test dentro de un componente Provider con un almacén simulado.

const { getByText } = render(
  <provider store="{store}">
    <test></test>
  </provider>
);

Utiliza getByText de @testing-library/react para encontrar los botones renderizados en el componente y verifica que su propiedad textContent coincide con los valores devueltos por selectTest.

const buttons = [
  getByText('2'),
  getByText('3'),
  getByText('4'),
  getByText('5'),
];
buttons.forEach((button) => expect(button).toBeInTheDocument());

Por último, también puedes verificar que setTest haya sido llamado con el argumento esperado.

expect(setTest).toHaveBeenCalledWith(['2', '3', '4', '5']);

El archivo de prueba completo se vería así:

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';

import { store } from '../app/store';
import Test from './TestComponent';
import { setTest, selectTest } from './testslice';

jest.mock('./testslice', () => ({
  setTest: jest.fn(),
  selectTest: () => ['2', '3', '4', '5'],
}));

test('renders buttons with expected values', () => {
  const { getByText } = render(
    <provider store="{store}">
      <test></test>
    </provider>
  );

  const buttons = [
    getByText('2'),
    getByText('3'),
    getByText('4'),
    getByText('5'),
  ];

  buttons.forEach((button) => expect(button).toBeInTheDocument());

  expect(setTest).toHaveBeenCalledWith(['2', '3', '4', '5']);
});

es.davy.ai

¿Tienes una pregunta?

Probando botones en React renderizados dinámicamente con datos de Redux.

Answer

davy.ai