Cannot read properties of null (reading 'query') when testing with Jest

[Smackface]

Title is self explanatory, I receive this error when testing the file.

Relevant code from: Notification.js (component being tested)

import React from "react";
import {Box, Button, Card, CardActions, CardContent, List, ListItem, Typography, FormControlLabel, ButtonGroup,} from "@mui/material";
import SwitchIos from "./SwitchIos";
import { useTranslation } from "next-export-i18n";
import Image from "next/image";
import { useEffect, useState } from "react";
import nookies from "nookies";
import axios from "axios";
import ApiRunner from "../../plugins/api";
import { useAuthentication } from "../../hooks/useAuthentication";

let summaryNotifs = [{ id: "day" }, { id: "week" }, { id: "month" }];

const styleSummarySelectButton = { backgroundColor: "gray", color: "white" };
const styleSummaryDefault = { color: "black" };

const Notification = (props) => {
  const { summaryType, setSummaryType } = props;
  const { t } = useTranslation();

Relevant code from: notification.test.js

  import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/react'
import Notification from '../../../components/user/Notification'

describe('Page renders', () => {
    it('renders', () => {
        render(<Notification />)
    })
})

describe('User sets notification preferences', () => {

    it('renders notification, then clicks one of the switches', async () => {
        render(<Notification />)

        await userEvent.click(screen.getByTestId('postScheduled'))

        expect(screen.getByTestId('postScheduled')).toBeTruthy()
    })
})

Full text of error in console:

● User sets notification preferences › renders notification, then clicks one of the switches

    TypeError: Cannot read properties of null (reading 'query')

      17 | const Notification = (props) => {
      18 |   const { summaryType, setSummaryType } = props;
    > 19 |   const { t } = useTranslation();
         |                               ^
      20 |   // console.log(t, useTranslation(''))
      21 |   const userData = useAuthentication();
      22 |   const [notifSettings, setNotifSettings] = useState({});

      at useSelectedLanguage (node_modules/next-export-i18n/index.js:80:24)
      at useTranslation (node_modules/next-export-i18n/index.js:155:22)
      at Notification (components/user/Notification.js:19:31)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at node_modules/@testing-library/react/dist/pure.js:101:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.<anonymous> (__tests__/components/user/information.test.js:43:15)

  I've tried playing around with some of the solutions suggested over at the i18next/react-i18next github but got nowhere with it. Console logs of useTranslation and {t} both return function t(key, view). Thanks for any help/suggestions.

[danielreptar]

I'm facing the same issue.

[martinkr]

Hi,

Thank you for reaching out.

Can you provide a complete code example or even better a sample repostiory so I can see the actual code?

Thank you in advance!

[oliviervanbulck]

Same issue, I'm stuck.