Unit testing a react component with NextIntlProvider using Jest

[kylemorena]

Hello everyone,

I'm getting an error working on "next-intl": "3.0.0-beta.18", "jest": "^27.5.1",, "ts-jest": "^27.1.3",

Cannot find module 'use-intl/_useLocale' from 'node_modules/next-intl/dist/development/react-client/useLocale.js'

    Require stack:
      node_modules/next-intl/dist/development/react-client/useLocale.js
      node_modules/next-intl/dist/development/link/Link.js
      node_modules/next-intl/dist/development/react-client/Link.js
      node_modules/next-intl/dist/development/react-client/index.js
      node_modules/next-intl/dist/development/index.js
      node_modules/next-intl/dist/index.js

Below here is my code:

useExperienceDuration.test.tsx

async function createWrapper(lang: string) {
		const common = await import(`@/locales/${lang}/common.json`);
		return function Wrapper({ children }) {
			return (
				<NextIntlProvider locale={lang} messages={common}>
					{children}
				</NextIntlProvider>
			);
		};
	}


	it("Returns the total of duration giving a range", async () => {
		const { result } = renderHook(
			() => {
				return useExperienceDuration();
			},
			{
				wrapper: await createWrapper("en")
			}
		);
		const label = convertLabel(result.current.labelDuration, "en");
		expect(label).toBe(expected);
	})

Has someone recently faced it, and solved it?

Many thanks for considering my request.

Kyle

[amannn]

If you install [email protected] it should include [email protected] which provides the entry point that seems to cause your issue. Maybe reinstalling dependencies and making sure use-intl was added correctly can help to resolve the issue?

[kylemorena]

Hello, looking inside my lock file, I got

  /[email protected]([email protected])([email protected]):
    resolution: {integrity: sha512-RK3gM4NsA3mwzroMfIEgrCs5JDA/KVrMBzWlk0WThbqSeWy4vULz2FBUEqQdE8dSIdhxsArwGbrZwUNbCgSkWw==}
    peerDependencies:
      next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
      react: ^16.8.0 || ^17.0.0 || ^18.0.0
    dependencies:
      '@formatjs/intl-localematcher': 0.2.32
      negotiator: 0.6.3
      next: 13.4.19(@babel/[email protected])([email protected])([email protected])([email protected])
      react: 18.2.0
      server-only: 0.0.1
      use-intl: 3.0.0-beta.3([email protected])
    dev: false

[amannn]

Can you share a reproduction?

Works fine for me locally with this jest.config.js:

/* eslint-env node */
const nextJest = require('next/jest');

const createJestConfig = nextJest({dir: './'});

module.exports = createJestConfig({
  moduleNameMapper: {
    '^next$': require.resolve('next'),
    '^next/navigation$': require.resolve('next/navigation')
  },
  testEnvironment: 'jsdom',
  rootDir: 'src'
});

(tested with example-next-13 on the RSC branch)

[kylemorena]

Ok now working was about jest.config.js
Thank you!

[stevefiedler]

i am using [email protected] and am still getting this error in my jest unit tests:

Cannot find module 'use-intl/_useLocale' from 'node_modules/next-intl/dist/development/react-client/useLocale.js'

I am now using NextIntlClientProvider rather than the older IntlProvider.

Maybe this works for App Router and not for Pages Router any more? That doesn't make sense to me either.

In the stack trace I see:
node_modules/next-intl/dist/development/react-client/useLocale.js
node_modules/next-intl/dist/development/index.react-client.js
node_modules/next-intl/dist/index.react-client.js

Where is next-intl/_useLocale, because I don't see it?

[stevefiedler]

Actually I found it in use-intl just where it should be but I'm still getting the error.

Ideas?

[gorangatuzo]

I have the same problem running "next-intl": "^3.3.2", and "next": "^14.0.4",

[stevefiedler]

I agree this is still broken. I am also using the Pages router. The application works fine, it's just all the tests failing.