我正在尝试使用 next-intl 为我的 nextjs 组件创建一个单元测试。
我的组件：
import Head from "next/head";
import { useTranslations } from "next-intl";
export default function Home() {
const t = useTranslations("HomePage");
return (
<div>
<Head>
<title>My title goes here</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>{t("welcome")}</h1>
</div>
);
}
// Get localized messages
export function getStaticProps({ locale }) {
return {
props: {
messages: require(`locales/${locale}.json`),
},
};
}
如何在以下行中创建单元测试：
import Home from '../pages/index'
describe('Home', () => {
it('renders a heading', () => {
render(<Home />)
const heading = screen.getByRole('heading', {level: 1})
expect(heading).toBeInTheDocument()
})
})
曾尝试嘲笑 next-intl 但没有任何运气。还尝试将 Home 包装在
<NextIntlProvider messages={localization}>next-intl文档链接：
i18n 下一个：https://nextjs.org/docs/advanced-features/i18n-routing
下一个国际：https://formatjs.io/docs/getting-started/installation/
更新：现在工作:)
我设法使用以下设置运行测试：
import React from 'react'
import { render, screen } from '@testing-library/react'
import { NextIntlProvider } from "next-intl";
import Home from '../pages/index'
describe('Home Component', () => {
const useRouter = jest.spyOn(require('next/router'), 'useRouter')
const locale = 'no-NB';
const messages = require(`../locales/${locale}.json`);
useRouter.mockImplementationOnce(() => ({
query: { locale: locale },
}))
it('renders a heading', () => {
render(
<NextIntlProvider messages={messages} locale={locale}>
<Home />
</NextIntlProvider>
)
const heading = screen.getByRole('heading', {level: 1})
expect(heading).toBeInTheDocument()
})
})
你拯救了我的一周@Tvedt 谢谢！！！