chore(jest): setup jest for frontend

[bhavin-a]

Description

The PR sets up jest tests in the repo with support of custom matchers from React Testing library.

Closes #312

How to Test?

1. Run cd ./frontend
2. Run command yarn test
3. This will run a sample test added for NotFound page.
4. Run command yarn test:coverage
5. This will run a sample test added for NotFound page along with coverage report which this test was able to capture.

[palashgdev]

Hi @Bhavin789
Thanks for your PR against the issue will review your PR by tomorrow

[bhavin-a]

Sure @palash-signoz , whenever you are available 🙂.

[palashgdev]

Hi @Bhavin789

Please go through the suggestion which will help to review your PR

1. change test script to jest
2. Introduce a new script with key test:watch :jest --watch

[palashgdev]

Hi @Bhavin789 please update the threads also

[bhavin-a]

Hi @Bhavin789 please update the threads also

@pal-sig Have updated the threads and resolved all except for the removal of cypress from root tsconfig. Can you please help confirm if that is ok? Thanks!

[palashgdev]

Hi @Bhavin789 please update the threads also

@pal-sig Have updated the threads and resolved all except for the removal of cypress from root tsconfig. Can you please help confirm if that is ok? Thanks!

no please don't remove that one

[bhavin-a]

Hi @Bhavin789 please update the threads also

@pal-sig Have updated the threads and resolved all except for the removal of cypress from root tsconfig. Can you please help confirm if that is ok? Thanks!

no please don't remove that one

@pal-sig Adding it back is actually throwing error on expect. Is this change breaking anything? As per my limited knowledge, cypress folder has its own tsconfig which is extending root one which should do the job even if we remove this.

Any idea on how can I check if anything is breaking?

If this is breaking anything, we can can by one redundant but easy route to explicitly include expect from jest which also looks fine to me. Ref

Let me know whichever way sounds good to you. Thanks!

[palashgdev]

Ref

Hi @Bhavin789
I have checked and basic config and basic jest is working fine

I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

[bhavin-a]

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine

I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Awesome, thanks a ton for verification @pal-sig 🙌

Any reason why commit-lint is failing? Is there a way to re-trigger? Unable to understand the reason here.

[palashgdev]

Ref

Hi @Bhavin789
I have checked and basic config and basic jest is working fine

I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine
I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Awesome, thanks a ton for verification @pal-sig 🙌

Any reason why commit-lint is failing? Is there a way to re-trigger? Unable to understand the reason here.

You can check the logs

[palashgdev]

Basically in the future will integrate husky with commit lint in the future which will reduce this type of error

[bhavin-a]

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine

I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine
I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Awesome, thanks a ton for verification @pal-sig 🙌
Any reason why commit-lint is failing? Is there a way to re-trigger? Unable to understand the reason here.

You can check the logs

I actually did but could not find any specific reason. The PR title contains the format defined by commitlint itself with a valid type and subject but still its failing. Can you help identify the issue? I might be missing something here.

[palashgdev]

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine
I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Ref

Hi @Bhavin789 I have checked and basic config and basic jest is working fine
I forget that cypress tsconfig.json is importing the root one. so removing ./cypress will fix our error

Awesome, thanks a ton for verification @pal-sig 🙌
Any reason why commit-lint is failing? Is there a way to re-trigger? Unable to understand the reason here.

You can check the logs

I actually did but could not find any specific reason. The PR title contains the format defined by commitlint itself with a valid type and subject but still its failing. Can you help identify the issue? I might be missing something here.

yeah it is checking on the previous commit too

[bhavin-a]

yeah it is checking on the previous commit too

Oh, this shouldn't be the case, right? As per what I have seen, we squash commits, and thus, we don't need to lint on the commit history messages. Please correct me if I am wrong here.

In this case, is there any workaround to make the CI pass? @pal-sig
Thanks!