Photo by Ferenc Almasi on Unsplash

Here is a trick that will allow you to test your React applications quickly. We will go through how changing your mindset and using simple steps can lead to the resilient testing of your apps.

Why do most developers think testing is not easy?

Here are some reasons that lead to this problem:

• Poor code quality
• Testing unnecessary details
• Not thinking tests in terms of users
• Writing brittle tests that break even on refactoring

How poorly written tests wreck havoc

The above example is a simple example of a poorly written test. One big sign of poorly written tests is that your tests break whenever code is changed, even if it’s just refactoring.

In the above example, the test involves how the component state changes. If that implementation changes in the future, the test will break even if the component experience is not changed.

Remember this thumb rule: A test should never break unless the component experience changes. It should be unaware of internal implementation. The more it will be aware of internal parts, the brittle your tests will be, and the more time you will have to spend on them.

Write great tests with this quick secret

This simple secret will allow you to write great tests for your React applications. Follow these simple rules, and your tests will be highly resilient, leading to highly reliable software:

1. Write testable components with this simple guide.

2. Never test implementation details about a component. Do not test things like: state, props, logic of a function, CSS styling etc. The more your tests, are aware of implementation details, the more brittle it is. Use React Testing Library for writing tests following best practices.

3. While writing components, keep them independent at first. Then write it’s tests. Link the component to other parts in app only when tested. It ensures that the component can work independently and makes them easy to test.

4. While writing tests, always think in terms of users. These users will use your application: end user and other developers. End user only care about things rendered on the screen, and the interaction with the application. Other developers only care about things like: when submit is clicked, valid form data is sent to the API (mock API used in testing), and response is displayed correctly on screen. Only write tests for these two users. Neither of them care about internal implementation details. It is why you should avoid that in tests.

An example of resilient testing in React

In the above example, the tests only check the component experience. It does not contain any internal implementation. It allows us to refactor the component without breaking the tests. It is the correct method for writing tests.

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos