Hello everyone, I tried to solve the error in the test and attempted to create an environment for adding new tests in the future 🕺 fyi : @kayraberktuncer
First Small Steps for tests
First, I ran the command yarn test and encountered an error:
FAIL src/modules/Dashboard/index.spec.tsx
● Test suite failed to run
Cannot find module '@components/shared/Form/Button' from 'src/modules/Dashboard/components/DomainModal/index.tsx'
Require stack:
src/modules/Dashboard/components/DomainModal/index.tsx
src/modules/Dashboard/index.tsx
src/modules/Dashboard/index.spec.tsx
8 | import { useFormik } from "formik";
9 | import useTranslation from "next-translate/useTranslation";
> 10 | import { FC, useState } from "react";
| ^
11 | import { toast } from "react-toastify";
12 |
13 | interface DomainModalProps {
at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
at Object.<anonymous> (src/modules/Dashboard/components/DomainModal/index.tsx:10:54)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.114 s
Ran all test suites related to changed files.`
The error message indicated that the module specified in the src/modules/Dashboard/index.spec.tsx test file could not be found. I thought I needed to define a path transformation using the moduleNameMapper property in the Jest configuration. So I updated the jest.config.js file as follows:
Afterwards, the "Cannot find module" error was resolved, and test failures started to appear. It felt great to see that I was getting closer.
The error output in the src/modules/Dashboard/index.spec.tsx file was as follows:
FAIL src/modules/Dashboard/index.spec.tsx
<Home /> specs
✕ should render correctly (108 ms)
● <Home /> specs › should render correctly
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
47 | const DomainTable: FC<DomainTableProps> = (props) => {
48 | const [showDomainModal, setShowDomainModal] = useState(false);
> 49 | const router = useRouter();
| ^
50 |
51 | console.log(router,'mert');
52 | const { t } = useTranslation("dashboard");
at useRouter (node_modules/next/client/router.ts:135:11)
at DomainTable (src/modules/Dashboard/components/DomainTable/index.tsx:49:27)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
at act (node_modules/react/cjs/react.development.js:2582:11)
at node_modules/@testing-library/react/dist/act-compat.js:63:25
at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
at render (node_modules/@testing-library/react/dist/pure.js:246:10)
at Object.<anonymous> (src/modules/Dashboard/index.spec.tsx:6:11)
After this output, I decided to follow the steps below:
jest.mock('next/router', ...): I used the Jest mock function to mock the next/router module and emulate the hook.
useRouter: jest.fn().mockReturnValue({ ... }): I replaced the useRouter hook with a mocked function provided by Jest. This mocked function contains typical properties and values of the useRouter object.
expect(screen.getByTestId("home")).toBeInTheDocument(): By using the screen object and calling getByTestId function, you are checking whether an element with data-testid attribute set to "home-dashboard" exists on the screen. This way, I confirmed that the "home-dashboard" component was rendered correctly. You can remove this line if it's not needed.
the error has been resolved and each of the subfiles can have a test within itself
Hello everyone, I tried to solve the error in the test and attempted to create an environment for adding new tests in the future 🕺 fyi : @kayraberktuncer
First Small Steps for tests
First, I ran the command
yarn test
and encountered an error:The error message indicated that the module specified in the
src/modules/Dashboard/index.spec.tsx
test file could not be found. I thought I needed to define a path transformation using themoduleNameMapper
property in the Jest configuration. So I updated thejest.config.js
file as follows:Updated config:
Afterwards, the "Cannot find module" error was resolved, and test failures started to appear. It felt great to see that I was getting closer.
The error output in the
src/modules/Dashboard/index.spec.tsx
file was as follows:After this output, I decided to follow the steps below:
jest.mock('next/router', ...)
: I used the Jestmock
function to mock thenext/router
module and emulate the hook.useRouter: jest.fn().mockReturnValue({ ... })
: I replaced theuseRouter
hook with a mocked function provided by Jest. This mocked function contains typical properties and values of theuseRouter
object.expect(screen.getByTestId("home")).toBeInTheDocument()
: By using thescreen
object and callinggetByTestId
function, you are checking whether an element withdata-testid
attribute set to "home-dashboard" exists on the screen. This way, I confirmed that the "home-dashboard" component was rendered correctly. You can remove this line if it's not needed.the error has been resolved and each of the subfiles can have a test within itself