Cannot read properties of null (reading 'query') when testing with Jest
Smackface opened this issue · 3 comments
Smackface commented
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 commented
I'm facing the same issue.
martinkr commented
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 commented
Same issue, I'm stuck.