How to test Next.js components with Redux Toolkit features using Jest
In this video I'm showing how I'm testing a Next.js component which integrates Redux Toolkit features. I'm using Jest for testing.
I'm using the Redux Toolkit for HTTP requests and Redux to display the actions messages. Redux Toolkit is used to configure the Redux Store. I'm showing even how is created my Redux Store provider for both tests and app components.
I'm using the Redux Toolkit for HTTP requests and Redux to display the actions messages. Redux Toolkit is used to configure the Redux Store. I'm showing even how is created my Redux Store provider for both tests and app components.
Category
🦄
CreativityTranscript
00:00In my next JS component,
00:04I'm using Redux Toolkit features.
00:08To make HTTP requests and display real-time
00:37messages.
00:46In this video, I'm going to show how I'm testing this component with Redux Toolkit integrated.
00:57I'm using the Redux Toolkit in the store file.
01:07To set up a Redux store.
01:14Next, I'm creating a React content provider for the Redux store.
01:27And this provider is used in the main layout.
01:37To make it available in the store to all app components.
01:46Now, to test this component with the Redux Toolkit features.
01:55I have a test file where the render method is replaced with a custom render with providers function.
02:09In this file, where the next JS components are rendered with my providers.
02:25And here I'm using the same provider like in the store provider.
02:39Let's run a test.
03:09The test is passed as expected.