Avoid extensive usages of `.toMatchInlineSnapshot()` in tests to make it more useful

[zainfathoni]

Description

The extensive usages of .toMatchInlineSnapshot() assertion causes unnecessary snapshot changes that are weakly related with the changes we made in each PRs. It renders the snapshots to be less useful.

We have to replace those assertions with more meaningful assertions.

Implementation model

We need to avoid snapshot testing using .toMatchInlineSnapshot() in favour of testing components the way the user would use it. This means using meaningful assertions as much as possible.

To quote Kent C. Dodds:

The more your tests resemble the way your software is used, the more confidence they can give you.

Further reading material: Effective Snapshot Testing by Kent C. Dodds.

Tasks

Tests using .toMatchInlineSnapshot():

• [ ] ~/components/__tests__/report-button.test.tsx
• [ ] ~/components/__tests__/search-filter.test.tsx
• [ ] ~/components/__tests__/search-form.test.tsx
• [ ] ~/components/home/__tests__/homepage-contributing.test.tsx
• [ ] ~/components/home/__tests__/homepage-header.test.tsx
• [ ] ~/components/home/__tests__/homepage-start.test.tsx
• [ ] ~/components/home/__tests__/homepage-telemedicine-cta.test.tsx
• [ ] ~/components/home/__tests__/homepage-whatsapp-cta.test.tsx
• [ ] ~/components/kontak-darurat/__tests__/chatbot-section.test.tsx
• [ ] ~/components/layout/__tests__/global-header.test.tsx
• [ ] ~/components/layout/__tests__/navigation.test.tsx
• [ ] ~/components/ui/__tests__/alert.test.tsx
• [ ] ~/components/ui/__tests__/badge.test.tsx
• [ ] ~/components/ui/__tests__/button.test.tsx
• [ ] ~/components/ui/__tests__/feedback-section.test.tsx
• [ ] ~/components/ui/__tests__/responsive-img.test.tsx
• [ ] ~/components/ui/forms/__tests__/input-text.test.tsx
• [ ] ~/components/ui/forms/__tests__/input-textarea.test.tsx

[resir014]

Updated first post with a list of all the test files still using .toMatchInlineSnapshot().

[adibfirman]

Hi @zainfathoni @resir014 I will try to pick up this issue but I have a question regarding it, according to the article above seems function .toMatchInlineSnapshot() its too "huge snapshots" that we use in our test file, so basically do we just remove it or change it with another expect function? thanks

[zainfathoni]

We should replace them with more meaningful assertions, such as asserting that some text are rendered, or some images with certain alt text are rendered.

[adibfirman]

@zainfathoni i see, noted for that thank you, I will trying to picking up this task ya mas 👌

[rubiagatra]

Good luck @adibfirman !