使用NextJS,GraphQL,Apollo和i18 n设置React测试库-无法破坏属性

yxyvkwin  于 2023-04-30  发布在  React
关注(0)|答案(1)|浏览(113)

正如标题所示,我很难在使用NextJS,GraphQL,Apollo和i18 n的项目上设置React测试库
终端抱怨路由器没有被设置,所以我用next-router-mock模拟它解释在他们的文档,现在我得到这个错误,我不能包我的头周围

TypeError: Cannot destructure property 'pageTitle' of '_languageContent.default[locale]' as it is undefined.

// __tests__/index.test.jsx

import { render, screen } from '@testing-library/react'
import Home from '../src/pages/index'
import '@testing-library/jest-dom'
import { QueryClient, QueryClientProvider } from "react-query"
import mockRouter from 'next-router-mock';

jest.mock('next/router', () => require('next-router-mock'));

const queryClient = new QueryClient()

describe('Home', () => {
  it('renders a heading', () => {
    mockRouter.push("/en-US");
    render(
      <QueryClientProvider client={queryClient} >
        <Home />
      </QueryClientProvider>
    )

    const heading = screen.getByText('stuff');

    expect(heading).toBeInTheDocument()
  })
})

我的假设是我的测试没有接收到它所需要的语言字符串-语言字符串由URL确定-http://localhost:3000/en-US(英语)http://localhost:3000/fr-FR(法语)。
在页面组件本身上,languageContent常量被提供了一个来自useRouter的变量,以确定使用哪些字符串
但我曾试图设置的网址与mockRouter但这没有做什么
下面是我正在尝试测试的组件

h5qlskok

h5qlskok1#

您应该尝试将import语句从next/router更改为next/navigation。..如果你要使用next/router,那么试试

router = useRouter();
const {locale} = router;

相关问题