search

Trendyol / perfanalytics

Web Performance Metrics
82 stars 6 forks source link

Shall we write a test? #81

Open mertcanaltin opened 1 year ago

mertcanaltin commented 1 year ago

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

### Tasks
- [ ] https://github.com/Trendyol/perfanalytics/issues/83
- [ ] https://github.com/Trendyol/perfanalytics/issues/86
k61b commented 1 year ago

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 commented 1 year ago

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:

the error has been resolved and each of the subfiles can have a test within itself

mertcanaltin commented 1 year ago

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 commented 1 year ago

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

k61b commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

"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 commented 1 year ago

"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 commented 1 year ago

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.