Solution: Failed to call useTranslations because the context from NextIntlClientProvider was not found

InterTuts

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.

Transcript

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

Category

Transcript

Recommended