I'm writing a test for my component in react js to check if Download file comes after button is clicked. My project also includes redux. It is showing error "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers
test component
const initialStore={}
const store = configureStore(initialStore)
const MockComponent = () => {
return (
<Provider store={store}>
<BrowserRouter>
<ExpenseList />
</BrowserRouter>
</Provider>
);
};
test('should render "Download file" when button is clicked', () => {
render(<MockComponent />);
const buttonElement = screen.getByRole("button");
userEvent.click(buttonElement);
const paraElement = screen.getByText(/download file/i);
expect(paraElement).toBeInTheDocument();
});
Main component
const ExpenseList = () => {
const [premiumBtn, setPremiumBtn] = useState(false);
const listOfItems = useSelector(state=>state.expense.expenseItems)
const amount = useSelector(state=>state.expense.amount)
const dispatch=useDispatch()
useEffect(() => {
if(amount>10000){
setPremiumBtn(true)
}
}, [amount]);
const expenses = listOfItems.map((expense)=>{
return(
<ExpenseListShow
key={expense.id}
id={expense.id}
amount={expense.amount}
category={expense.category}
description={expense.description}
/>
)
})
const activatePremiumHandler=()=>{
dispatch(expenseActions.activatePremium())
}
return (
<div>
{expenses}
<p>Amount Spent: {amount}</p>
{premiumBtn && <button onClick={activatePremiumHandler}>Activate Premium</button>}
</div>
);
}
export default ExpenseList;