fix: test failures and improved test structure

[mertcanaltin]

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:

Updated config:

const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
  moduleNameMapper: {
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '^@modules/(.*)$': '<rootDir>/src/modules/$1',
    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
    '^@schemas$': '<rootDir>/src/schemas.ts',
    '^@services/(.*)$': '<rootDir>/src/services/$1',
    '^@constants$': '<rootDir>/src/constants.ts',
    '^@enums$': '<rootDir>/src/enums.ts',
  }
};

module.exports = createJestConfig(customJestConfig);`

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

[k61b]

Good to see you again, thanks for your contribution. ❤️