Testing buttons in react dynamically rendered with data from redux - reactjs

Question

This is a simplified example I've made.
I have the following react component
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) => <button key={i}>{v}</button>)}
</>;
};
export default Test;
And the following redux reducer slice
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;
I would like to test the Test component and see, that the buttons are rendered with the values I've dispatched to the redux store (The length of values will be a fixed length)
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(
<Provider store={store}>
<Test/>
</Provider>
);
//Somehow test that the buttons rendered in <Test/> component have the values dispatched in the useEffect hook
});
How can I achieve this?

Answer 1

Please have a look at the official documentation of testing redux with react and testing library. The idea is to create a preloadedState which gets injected in your application from inside the test. You can then test for the objects of this preloadedState and see if the objects are rendered correctly. After setting up the helper render function in the docs above with e.g.
...
import appReducer from 'PATH/testSlice';
...
store = configureStore({ reducer: { test: appReducer }, preloadedState })
you can then do:
...
import { render } from '../../test-utils'
...
const givenState = { test: ["1", "2", "3"] }
const { getByText } = render( <Test/>, { preloadedState: givenState });
for(const val of givenState.test) {
expect(getByText(val).toBeVisible();
}
For more "integration"-testing, you could also mock return values from functions that finally populate the state, e.g. fetch calls. That way, you would not need to create a preloadedState but mock the fetch calls, whose objects you would use for assertions.