DEV Community: Damian Girardi

React Test-driven Development: How to implement

Damian Girardi — Fri, 30 Sep 2022 20:08:22 +0000

In the last decade, has succeeded a new and massive interest in the developer’s community about clean code, just because it offers some great tests to run while they are building apps, and real expectation -avoiding to/ express it like concern- to keep on walking ahead with these tasks and getting best and viable, each day the planning.

But reality tells us that it is not true that this stuff exists. There is no way we can copy or replicate automatically on each project while we get the best results. At least it will work and reach the standards equally. Let’s imagine you are in charge of one with a lot of e2e tests, and you win more value than others because it needs logic and the app is based on the UX interaction; what would not be happening in another project of yours, if you win significant relevance by having unitary tests more granular, at the reason of components recycling.

Reality says too, that what does exist, is the feature inside its app that programs the best auto-solution itself. To make this, the test-driven development (DD) is the ‘one’ tool to balance your codifying developments. So, from here let’s talk about this subject, of React JS like the landing of ‘how to’ do this duty.

Importance of Test-Driven Development (TDD)

Kent Beck created the TDD technique in 2002. The objective was to develop new software in writing short cycles as part of the eXtreme Programming (XP) methodology. First, executing an automated test failing, second making a minimum required to pass, and finally, making the refactor step to eliminate redundancies. Yes, a cycle.

The red, green, and refactor are the essence of test-driven development.

Image by Digite

Then we have these colored steps, to ensure our app is working and to catch personal guarantees: Red to start an automated test, planning before it fails, and watching a red text on test runners. Green to try a little fix-it some way, getting the green text on test runners. And target applying refactor tricks, good practices from SOLID, and other code principles created. The red-green-refactor cycle is repeated as many times as necessary until the feature has been completed.

Why should you use test-driven development with React?

The main reason for increased software quality is not the TDD practice by itself but the automated tests produced through it. The common question is: ¿What is the difference between using a test-driven development and writing the test later?

The developer gets feedback from the test. The difference is in the amount of feedback, precisely. When the developer writes the tests, only after implementing the production code, a lot of time has passed already without the developer getting any feedback on it.

The earlier the developer receives feedback, the better. When one has too much code already written, changes can be cumbersome and costly. Conversely, the less written code, the lower the cost of change.

And that’s precisely what happens with TDD practitioners: They get feedback at a time when change is still cheap. The other reason is that when following TDD a high test coverage is guaranteed, whereas a traditional approach might leave you with only a few tests when time runs short.

When to use Jest and React testing Library?

React testing library Is not an alternative to Jest. Each performs a clear task and you need them both to test your components. Jest is a test runner that finds other tests, runs them, and determines whether these passed or failed. Additionally, Jest offers us functions for test suites, test cases, and assertions. Let’s clear both definitions.

Jest is a test runner that finds other tests, runs them, and determines whether these passed or failed. Additionally, it offers some functions for making suite cases as well as Assertions which both help in testing our components effectively with ease of mind knowing they won’t cause any surprises when used together!

Jest is a JavaScript testing framework that allows developers to run tests on JavaScript and TypeScript code and integrates well with React. It is a framework designed with simplicity in mind and offers a powerful and elegant API to build isolated tests, snapshot comparison, mocking, test coverage, and much more.

So, React Testing Library

React Testing Library is a JavaScript testing utility built specifically to test React components, that simulates users’ interactions on isolated components, and asserts their outputs to guarantee the U is behaving correctly. React Testing Library provides virtual DOMs for testing React components.

Any time tests are run without a web browser, we must have a virtual DOM to render apps there, interact with the elements, and observe if the virtual DOM behaves like it should: like changing the width of a div on a button click.

Final thoughts

React Testing Library is not specific to any testing framework, but we can use it with any other testing library. Although Jest is recommended and preferred by many developers create-react-app uses both: Jest and React Testing Library by default.

Additionally, react-scripts automatically set up our server to watch for changes. So, if the test file is modified, the server automatically compiles and runs the test without needing to restart your server.

Build robust, more scalable JavaScript apps with TypeScript

Damian Girardi — Fri, 30 Sep 2022 18:21:11 +0000

JavaScript application building has come a long way and is one of the most popular programming languages. In significant part, its popularity is because this program has improved and evolved as time passes in an accelerated manner.

However, throughout its history, JavaScript also had many problems and bugs. Whether in the code bases, projects with years of development, or their large-scale applications, their scalability is unstable.

And that’s how TypeScript emerged as a solution to many problems with JavaScript. An option that offers a higher level of scalability, and more robust and reliable applications, becoming the best option for developing Javascript applications.

Benefits of using TypeScript to develop JavaScript applications

The JavaScript applications that have been developed using TypeScript bring a series of improvements or benefits. TypeScript is very different from other similar languages (typewritten), which is completely oriented to applications.

The new concepts make it possible for ideas to be expressed more concisely and precisely. Thanks to this, the creation of unique and modern applications is more secure and scalable, with the bonus that they are developed faster.

Having said all of the above, we can say that TypeScript is a superset of another program, which makes the functionality of javascript more extensive. Adding a lot of new features, like being able to improve generic or static typing, makes a fundamental difference.

If we mention some specific benefits, then we can name the following:

It seeks to write a language that is much easier to maintain, making it a clearer and cleaner language.
The code structure for objects is more straightforward and requires no knowledge.
TypeScript is innovative and offers testability and change, but it always focuses on the best direction.
JavaScript applications that implement TypeScript offer businesses a great way to grow. The quality of being able to develop or execute many projects with large amounts of code is undoubtedly very striking, primarily if the best result is obtained.

How do you start using TypeScript?

Don’t worry. If you know how to use JavaScript, you will find it a very easy-to-use type once you get used to it. This is because the syntax of both is very similar. You can even rename “.js” files to “.ts” to get you started.

But of course, the first thing that you need to do is install TypeScript, which is not anything complicated. When executing the corresponding terminal, it will also execute the command “npm install -g typescript” to install it correctly.

To check that there were no problems with the installation, run the command “tsc -v” in the terminal. If there is no problem, you should be able to see what version of typescript was installed in the terminal.

Compile Typescript to JavaScript

By the time you’ve written a TS code to some file, “ts” should know that browsers won’t be able to execute them independently. We want to tell you that you will have to compile the TypeScript files so browsers can execute them.

With an IDE, you’ll be able to compile JavaScript code inside of it, and the processes depend on what you’re using. In any case, the most important thing is to configure correctly and the correct selection of the options to compile.

Although what we recommend if you are starting is that you use the same terminal to perform this task. With the correct commands and always being aware of the files you want to compile, everything will be faster than you think.

What features does TypeScript have that makes it more scalable and robust than standard JavaScript codebases?
Taking all of the above into account, perhaps it’s best if we tell you what are the main features that make TypeScript an incredible option. In this way, we also reinforce the idea that it is a good idea to learn to code JavaScript applications together.

In addition to being characterized by facilitating work and solving the scalability problem that JavaScript has, we can highlight the following characteristics:

The static typing feature takes precedence over dynamic JavaScript typing. By itself, this quality reduces the margin of error and makes the code much more maintainable.
JavaScript is not the best fit for large-scale programs, and in fact, it was not developed for that. TypeScript fills in these gaps, providing JavaScript with all the necessary resources to make it scalable.
As we already mentioned, you can take advantage of all these features and the creation of codes without expecting problems with browsers.
Undoubtedly, this language dramatically improves the creation of JavaScript applications.

Possible inconveniences in the use of TypeScript in your project?

As for this point, we at Fuzzy Fish can say there will be no problem with using TypeScript in your project. It is essential to mention that its use can help to maintain and improve medium and large projects. And if we add the large number of benefits that its use brings, there is no reason to doubt.

Typescript can help in developing a minimum viable product in a more accesible, scalable and quick way. In Typescript, the strongly typed feature takes precedence over dynamic JavaScript typing. By itself, this quality reduces the margin of error and makes the code much more maintainable.

Final thoughts

If you are interested and want to know more about these programming languages or want to grow your company through them, at Fuzzy Fish, we can help you. We are a genuine, expert, innovative and professional company in using IT in a beneficial way for your business.