myrentokil-components-library 1.0.64 → 1.0.82

package/README.md

@@ -7,21 +7,93 @@ This library can be installed using npm.
 ```
 npm install myrentokil-components-library
 ```
-  
+
 ## Available Scripts:
 
-### Run tests
+### Run and update snapshot tests
+
 ```
 npm run test
+npm run test:updateSnapshot
+```
+
+## Run lint
+
+```
+npm run lint
 ```
 
 ### Run storybook locally
+
 This project uses Storybook. To see the components in the browser, run:
+
 ```
 npm run storybook
 ```
 
 ### Build storybook
+
 ```
 npm run build-storybook
 ```
+
+# Testing React Components: Why Use React Testing Library and Snapshot Testing
+
+## Introduction
+
+Testing is a crucial part of any software development process. It helps ensure that our code works as expected, catches bugs early, and provides a safety net for refactoring and future changes. In the
+context of React applications, there are various testing libraries and approaches available. In this README, we'll discuss why we chose to use React Testing Library and Snapshot Testing for testing
+our components. Additionally, we'll explain the need for `jest-styled-components` when working with Styled Components.
+
+## Why Use React Testing Library?
+
+React Testing Library (RTL) is a popular testing utility for testing React components. Unlike other testing libraries that focus on testing implementation details, RTL emphasizes testing user
+interactions and behavior. It follows the philosophy of "testing the component as a user would use it," making the tests more reliable and maintainable.
+
+Key advantages of using React Testing Library:
+
+1. **User-Centric Testing:** RTL encourages testing components from the user's perspective, simulating real user interactions such as clicking buttons, typing, and navigating. This approach ensures
+   that the components are tested in a way that closely resembles how users will interact with the application.
+
+2. **Accessibility Testing:** RTL promotes accessibility testing by providing utilities to query components based on their accessibility roles and attributes. This helps ensure that our components are
+   usable by all users, including those who rely on assistive technologies.
+
+3. **Encourages Best Practices:** By focusing on user interactions, RTL encourages writing tests that are less coupled to the implementation details. This promotes better component design and
+   encourages developers to follow best practices when building components.
+
+4. **Wide Community Adoption:** React Testing Library is widely adopted in the React ecosystem. It has a large community and active development, which means that you can find plenty of resources,
+   tutorials, and community support.
+
+## Why Use Snapshot Testing?
+
+Snapshot testing is a type of testing that captures the output (e.g., rendered UI) of a component and stores it as a "snapshot." On subsequent test runs, the output is compared to the stored snapshot
+to check for any unintended changes.
+
+Benefits of using Snapshot Testing:
+
+1. **Quick Feedback on UI Changes:** Snapshot testing provides a quick way to verify if any unintended changes were introduced to the UI. It can catch visual regressions or unexpected changes that
+   might not be immediately apparent during development.
+
+2. **Maintainable Test Suites:** Snapshots serve as documentation of how the UI should look for different scenarios. When the UI changes intentionally, you can update the snapshots, and when changes
+   occur unintentionally, you can investigate and address them appropriately.
+
+3. **Less Boilerplate:** Snapshot testing reduces the need for writing assertions manually, making test creation faster and less error-prone.
+
+## Why Include jest-styled-components?
+
+When using Styled Components to style our React components, the class names generated by Styled Components include unique hashes. This ensures that the styles are scoped correctly and avoids
+conflicts.
+
+However, this uniqueness can pose a challenge when using Snapshot Testing. The class names in snapshots may differ each time tests are run, causing unnecessary snapshot changes.
+
+To solve this issue, we include `jest-styled-components`, a library that provides a serializer for Jest. This serializer normalizes the class names generated by Styled Components during snapshot
+testing. It ensures that the class names in snapshots remain consistent, regardless of the test run environment.
+
+## Useful Links
+
+-   [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)
+-   [Snapshot Testing in Jest](https://jestjs.io/docs/snapshot-testing)
+-   [jest-styled-components GitHub Repository](https://github.com/styled-components/jest-styled-components)
+
+By using React Testing Library, Snapshot Testing, and `jest-styled-components`, we can create comprehensive and reliable tests for our React components while ensuring consistent styles in our
+snapshots. These practices contribute to maintaining a robust and stable codebase, allowing us to confidently build and iterate on our React applications.