Shall we write a test?

[mertcanaltin]

Hi everyone, shall we write a test for this wonderful project? 🎸

Tasks

Preview Give feedback

1. [TESTS] it gives an error because there is no next/router mock in every new test creation #83
   +0
2. Cypress init for e2e tests #86
   enhancement +1
   

[k61b]

Of course, why not, if you add new tests, we can review and move forward together. If you need help in any situation, you can write. ❤️

[mertcanaltin]

First Small Steps for tests

pr: #82

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

[mertcanaltin]

hello everyone, I wrote a simple test for domainTable and additionally we found it healthier to Mock it in its own test file instead of keeping a Mock in jest.test #83

[mertcanaltin]

greetings shall we use Cypress or Puppeteer to test and simulate e2e? @kayraberktuncer 💭

[k61b]

We generally use Cypress, but we also liked Puppeteer a lot. We didn't have a plan for e2e at the moment however we can implement it.

[mertcanaltin]

We generally use Cypress, but we also liked Puppeteer a lot. We didn't have a plan for e2e at the moment however we can implement it.

hi, first i made progress, i wrote an e2e test to login with cypress, looks good for now

Also would you like to run our unit tests as a Jest and our end-to-end tests with cypress?

[k61b]

"Also would you like to run our unit tests as a Jest and our end-to-end tests with cypress?" I don't understand what you mean when you say that.

[mertcanaltin]

"Also would you like to run our unit tests as a Jest and our end-to-end tests with cypress?" I don't understand what you mean when you say that.

Should we use Jest and Cypress together? Typically, Jest is used for mocking and component testing, while Cypress is preferred for end-to-end (e2e) testing

In Cypress, we can perform both component and e2e testing. Considering this capability, do you think we should eliminate Jest?

[k61b]

It's okay first we can handle e2e tests first. My opinion is we do not need unit tests for client in this time. We will have already tested most areas in client in general with e2e, so it is not so important to progress both at the moment.