This video shows how to solve the error message "Failed to call useTranslations because the context from NextIntlClientProvider was not found" which is generated during the Jest tests.
This video shows also how to provide the providers in the tested Next.js components.
This video shows also how to provide the providers in the tested Next.js components.
Category
🦄
CreativityTranscript
00:00I'm trying to run a test in just for a Next.js component
00:08but the error indicates that the Next.InternationalClientProvider component is missing
00:21So, what is the solution in this case?
00:27I'm using the Next.InternationalClientProvider in my main layout
00:37to make language strings available to all app components
00:53even in this tested component
01:04To solve this problem, I need to provide the Next.InternationalClientProvider to all my tested components as a provider
01:21exactly like I'm doing in the main layout file
01:29To solve this problem, I have replaced the react-testing-library-render function with my custom function renderWithProviders
01:47This function is located in this file
01:55where the Next.InternationalClientProvider components are rendered with certain providers
02:06exactly like in the layout file
02:12Here I will add the MissionProvider
02:26and will run a test
02:41and the test is passed as