All Questions
Tagged with react-testing-library next.js
99 questions
0
votes
0
answers
12
views
Jest.mock UT is not working as expected for external library
I am trying to write UT for my utility function, which involves an third party library, refiner-js.
Now, ideally this should work, but on running the tests, it shows this error and fails the test:
...
0
votes
1
answer
23
views
import not understood by test, resolve error thrown
When I run the test getting the error as:
Error: Failed to resolve import "@/components/card/LoadingCards" from "app/page.tsx". Does the file exist?
Plugin: vite:import-analysis
...
- 15.3k
1
vote
1
answer
639
views
Testing ShadCN Select with Jest and React testing Library [duplicate]
I have a ShadCN Select component that is abstracted into a CustomSelect component for reusability. I am trying to test the click functionality of the options and assert the text content on the Select ...
- 684
0
votes
0
answers
241
views
Vitest, async await, - The error was thrown, while Vitest was running this test
import React from "react";
import { render } from "@testing-library/react";
import { screen } from "@testing-library/dom";
import MultiSelect from "@/components/...
0
votes
0
answers
127
views
Mocking NextJS's useParams with Jest and RTL
As titled
I set up the following jest mock for next/navigation
jest.mock('next/navigation', async () => {
const actual = await jest.requireActual('next/navigation');
return {
__esModule: ...
- 1,732
0
votes
1
answer
579
views
jest-dom installed but @testing-library looking for dom
I installed jest, jest-environment-jsdom, @testing-library/react and @testing-library/jest-dom, as suggested on the Next.js site.
However, I am unable to run any test that involves working with the ...
- 116
0
votes
0
answers
147
views
Nextjs 14 jest configuration to use jest.setup.js
in my Nextjs 14 project, in the root directory I have
jest.config.js
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const ...
- 1,042
2
votes
1
answer
650
views
Jest test - useFormStatus is not a function
On Next.js 14 and have a simple test with useFormStatus hook. It is causing an error
TypeError: (0 , _reactdom.useFormStatus) is not a function
As soon as I remove the useFormStatus, the tests pass.
...
- 245
0
votes
0
answers
65
views
How to test loading script with correct props
I'm loading a script for 3rd party cookie management using the <Script /> component. I want to test that it was loaded with correct language attribute. But I don't know how to test it.
...
- 6,780
0
votes
0
answers
38
views
renderHook leaking across adjacent tests
I'm having an issue with renderHook leaking across tests.
If I run both test in isolation they work, if I run the whole describe block the second test fails, on the line expect(result.current.data?...
- 3,231
0
votes
0
answers
135
views
Testing PrimeReact SplitButton with RTL and Jest: Displaying Items on Click
I’m working with the PrimeReact SplitButton component, and I want to write tests to ensure that it displays the additional options correctly when clicked. Specifically, I’d like to verify that the ...
3
votes
0
answers
440
views
How to write jest unit test for NextJs layout which includes server component
I wrote a nextjs layout component like this
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
&...
- 524
0
votes
0
answers
60
views
Component theme doesn't apply to testing playground
I'm having a hard time why jest doesn't use the theme I extend in Chakra UI. Even though I wrap the component in renderWithTheme() method. I refer to the Chakra UI documentation if there's a testing ...
- 123
0
votes
0
answers
411
views
mocking zustand store in next js with testing library and jest
component-store.js:
import { create } from 'zustand';
export const componentStore = create((set) => ({
ITEMS_PER_PAGE: 5,
currentNoOfItems: 5,
totalItem: '',
showMoreItems: (...
- 1
0
votes
0
answers
128
views
NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
I got this error when testing with react testing library with jest. Anyone help me to do it.
I want to rectify this error and run the test. The error pointed to the code which I was testing. I should ...
- 1
0
votes
0
answers
42
views
Test failures after upgrading Next from 12 to 13/ or 14
I am upgrading a Next application in accordance with some library vulnerabilities and failing at the first hurdle! I am currently on 12.2.0. When I try and upgrade to 13+ I get a LOT of test suite ...
- 2,860
0
votes
1
answer
233
views
Error while testing a component in next using emotion/styled with jest and react testing library
I am testing a component that has the following code and uses @emotion/styled:
import styled from "@emotion/styled";
const StyledNavBar = styled.div`
position: fixed;
top: 0;
width: ...
- 436
1
vote
3
answers
331
views
Cannot use import statement outside a module - jest + nextj.js
Running jest test I faced following issue:
`
SyntaxError: Cannot use import statement outside a module
30 | certificateEuropean: '/icons/certificate-european.svg',
31 | check: '/icons/...
- 11
1
vote
0
answers
521
views
Is there a way in app router nextjs to solve the "not implemented navigation ( except hash changes )"
I am testing an small app using App router, the current version of Nextjs Framework.
But I was dealing with mock to solve this error "Error: Not implemented: navigation (except hash changes)"...
- 11
0
votes
0
answers
39
views
How to use localStorage with jest nextjs
I am testing my nextjs web app with react testing library jest.
I am using localstorage to store the jwt for logged in users.
And in my app i am using useEffect to fetch the content from the server on ...
0
votes
1
answer
582
views
Vitest's 2 different beforeEach methods affect each other in different describe blocks
I have a React component which uses NextJS useRouter and changes the locale and the language of my web application. I want to write the different aspects of my component with different locales. I have ...
1
vote
0
answers
292
views
NextJS App Router React Testing Library Tests - ReferenceError: fetch is not defined
I'm trying to test a simple NextJS app router:
Users Page `/users
async function getUsers() {
const url = 'https://jsonplaceholder.typicode.com/users'
const data = await fetch(url)
if (!...
- 2,991
0
votes
1
answer
1k
views
Unable to mock an exported named function with jest / react-testing-library whilst rendering a nextjs page
I've been trying to mock a named imported function in a NextJS page but all attempts I've gleaned from various sites have failed so far.
I've tried to reproduce this using create-next-app with --...
- 71
22
votes
2
answers
11k
views
Error: invariant expected app router to be mounted why this happened when using react testing library
when i use react-testing-library, it says that error: invariant expected app router to be mounted , it has no such problem when running in the development environment.
the testing logics is here
...
- 231
1
vote
1
answer
434
views
No suggested imports for React Testing Library in VS Code
I am setting up a Next JS Typescript project that uses React Test Library. However I am unable to get the suggested imports working in my VS Code. As a really basic example consider this test in the /...
- 81
2
votes
4
answers
4k
views
How to test a component rendered using React.createportal?
I am using jest and react testing library. While i am trying to render the component i am not able to test it. Can you guys tell me the correct method to do it.
it("Render PopUp Properly", ()...
- 23
1
vote
0
answers
445
views
How to test i18n in next.js 13 by listening url changes or useRouter methods calls
I am trying to test the language change, I have tried to test clicking on the language button to check that the url changes, but I cannot get it to make the call.
Component:
LangButtons.tsx
import ...
- 11
2
votes
0
answers
1k
views
Test Next.js Link with React-testing-library - The link does not render as a <a> tag in the tests
I am using Next js (13.0.5) and react-testing-library (13.4.0).
In my code I use the Next js link component with a single div as a child, that div contains a text.
I am wrapping my text in a div ...
- 131
1
vote
1
answer
474
views
can not mock jsx/tsx in jest
I have next js, jest, react testing library.
The problem is that i can not mock component, when i do
jest.mock('ui/forms/Field/Field', () => {
const original = jest.requireActual('ui/forms/...
21
votes
4
answers
12k
views
Testing an async server component with Jest in Next 13
In NextJs 13+ using the experimental App folder, async server components can be written, as described by the documentation:
export default async function Page({ params: { username } }) {
// Initiate ...
- 11.9k
1
vote
1
answer
1k
views
Testing Library's userEvent.click doesn't work
I developed a project with NextJS. I want to test the pathname of the link in the navbar using Jest and Testing Library but userEvent.click doesn't work. So either the pathname doesn't change, it ...
- 104
0
votes
1
answer
188
views
Setting up React Testing library with NextJS, GraphQL, Apollo and i18n - Cannot destructure property
As the title suggests I'm having difficulty setting up React Testing Library on a project that uses NextJS, GraphQL, Apollo and i18n
Terminal was complaining about the router not being set up so I ...
- 851
1
vote
1
answer
570
views
React Testing Library not updating state in input field
I'm new to RLT, got this weird thing where I try to write a unit test for an input box, the RTL just won't update the state for input value, here's my testing code:
import { fireEvent, screen } from '@...
- 791
2
votes
0
answers
337
views
test with jset fails if the component includes react-quill in nextjs app
I'm trying to test my next app with jest and react-testing-library, the test works fine until i add react-quill it give me those errers:
" Warning: React.createElement: type is invalid -- ...
- 327
8
votes
2
answers
2k
views
Next 13 Jest test fails using 'next/headers'
I am using Next.JS 13, and have a component which is using
import { cookies } from 'next/headers';
The simplified component:
import { cookies } from 'next/headers';
function Simple() {
console.log(...
- 155
1
vote
1
answer
1k
views
React Testing Library with Next.Js, unit test failing because of state?
I'm trying to create a unit test using react testing library + jest in my nextjs app, it's a simples test, once a click on the button without fill the fields, it should show a error message "...
- 137
0
votes
1
answer
1k
views
React testing with Jest and React Testing Library not renderin text displayed on the webpage
I have a NextJS app that I am using Jest and React Testing Library to test. I have a card component that is passed data (id, image url, text, and name) that is rendered on the card. This works ...
- 13
2
votes
0
answers
534
views
Jest and React Testing Library in Next.js app: Cannot use import statement outside a module
I'm using Jest and RTL in my next.js app.
Installed and set-up as described in documentation but my tests are failing.
Note: I'm importing 3rd party lib, when I comment it out the tests are passing
...
- 21
0
votes
1
answer
740
views
TestingLibraryElementError: Unable to find an accessible element with the role "link" in the Next.js application
In the Next.js application, I am getting the error
TestingLibraryElementError: Unable to find an accessible element with the role "link"
while performing below assertion -
expect(screen....
- 2,644
0
votes
1
answer
60
views
Jest failed to parse JSX syntax even after proper configuration [duplicate]
I've started a fresh Next project and configured jest and testing library as docs require.
The test failed due to a syntax error, for some reason ts-jest is not able to parse stayles.container.
What ...
- 130
0
votes
0
answers
205
views
SyntaxError: Invalid or unexpected token when running tests with jest and react testing library
Counter.test.js:
import Counter from 'components/Counter';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
describe('Counter Testing', () ...
- 223
0
votes
1
answer
923
views
How to test screen orientation with jest and testing-library/react?
I wrote a test for a component in nextJs by testing-library/react and jestJs, and I checked "window.screen.orientation.type".
I got an error that "TypeError: Cannot read properties of ...
0
votes
1
answer
753
views
Testing React Hook Form with React Testing Library
I have a Component with a form. onSubmit the form is using Apollo useLazyQuery to retrieve data based on form values.
In the component the form is handled by React Hook Forms and therefore, the ...
- 791
0
votes
0
answers
197
views
How can a reusable component in React be mocked in a way that has separate use case during integration
I have a button that is a reusable component used in a component. I want to mock it in a way that I can test for both Previous and Next funtionality. I was able to mock it but I don't know how best to ...
- 46
-1
votes
1
answer
362
views
How to write effective tests for a project with i18n support?
I am coding on a Next.js project for a while. My project has i18n support and I want to write unit tests. But I couldn't figure out how to write effective tests. Am I supposed to write unit tests for ...
- 124
2
votes
1
answer
1k
views
Swiper SyntaxError: Cannot use import statement outside a module in React Next App that uses Webpack while testing using RTL
My Entire code:
Component type: (ProductGallery.types.ts)
type productGalleryType = {
productImages: string[];
};
export default productGalleryType;
Component: (ProductGallery.tsx)
import React, { ...
- 131
0
votes
2
answers
4k
views
React Component Testing - `useClient` must be used within `WagmiConfig`
Next.js app/TypeScript, Jest/React testing library. I would like to test my component but when I render it in a test case, I get the following error.
`useClient` must be used within `WagmiConfig`.
...
0
votes
0
answers
241
views
jest(createPortal) : container is not a DOM element
I am testing my component using next.js.
However, when rendering the component, I found the following error:
I don't know how to approach the workaround.
Is there any way to fix it??
Target ...
- 831
0
votes
1
answer
2k
views
testing JSON ld script tag in next js HEAD component
we are using next js for our project. We add structured data with json+ld format using tag inside next js tag .
now we add this json ld script tag conditionally.
OurPage.tsx
<Head>
<title&...
- 966
4
votes
1
answer
6k
views
Testing NextJS and Jest ReferenceError: TextEncoder is not defined
I am getting this error message while trying to learn how to test next.js applications
I have tried import the Text Encoder from utils at the top of the config as well as test file with no success
...
- 95