DEV Community: gabrielEloy

Testing redux in react native with testing library

gabrielEloy — Thu, 16 Dec 2021 23:43:01 +0000

This post is also available as a youtube video that can be checked out here:

The video version covers the topic with more depth than this article, and I highly recommend you check it out

Redux

Redux is undeniably one of the most well known and widely used state management libraries available. There was a time it was nearly impossible to hear the keywords react or react native with an "and redux" append at the end.

Today, even though redux is far from its monopoly days, it still is a super relevant tool, and a common doubt many people have is how to test redux applications.

Many times, I've heard the question

"What changes when testing a react (native) + redux application ?"

The answer to that is, almost nothing.

In this tutorial, we'll be using react native testing library and the main philosophy of this library is focusing on testing how your application works, instead of its implementation.

A major positive point of this testing strategy, is only caring about what's important, the software's functionality. So, if you restructure your entire codebase, but everything still works as before, your tests won't break.

But, even though the tests themselves don't change, the way you render your tests must change to accommodate redux needs.

Usually, when testing a component we only render it, like the following example

import { render } from '@testing-library/react-native';
import Component from 'component'

describe('When testing a component', () => {
  it('Usually only render the component itself', () => {
      render(<Component />);
  })
})

But, if you are familiar with redux, you know that every component which uses redux must be wrapped inside a provider with a valid store.

If we try to render a component which relies on redux for its state management without the expected provider, we the following error will be thrown

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

The way to solve this, is by simply wrapping your rendered component in a provider, like the following

import { render } from '@testing-library/react-native';
import Component from 'component'
import { Provider } from 'react-redux';
import yourStore from './store';

describe('When testing a redux component', () => {
  it('Should be wrapped by a provider', () => {
      render(
          <Provider store={yourStore}>
            <Component />
          </Provider>
      );
  })
})

But, doing this every time will pollute our code base, and there must be a better way to handle this rendering, don't you agree ?

Thankfully for us, we can leverage the existence o jest globals

If you are not familiar with jest globals, or jest itself, here goes a quick explanation:

Jest - is a test runner shipped by default in react native projects

globals - globals are globally available helper functions, usable in our test suite without the need to import them

Although a jest global for rendering redux applications does not exist, we can easily create new globals with jest.

So let's create a global called renderWithRedux, which will encapsulate this logic for us

Creating globals

To create a redux global, the first thing we'll need is editing our package JSON to expect a setupFile

Search your the following line in your file

  "jest": {
    "preset": "react-native"
  }

and edit it to look like this

  "jest": {
    "preset": "react-native",
    "setupFiles": ["<rootDir>/setupTests.js"]
  }

Basically what we are doing here is telling our application to read a setup file which resides in our root directory, hence the rootDir tag, and is called setupTests.js

But, this file does not exist yet, so, create it, and leave it blank for now.

Creating our rendering function

First start by creating a folder called helpers, and inside of it, create another folder, called testHelpers. Inside the testHelpers folder, create a file called renderWithRedux.js

Inside that file, let's create our helper.

it will look something like this

import { configureStore } from '@reduxjs/toolkit';
import reducers from '<pathToYourReducers>'; // this is not a real path
import { Provider } from 'react-redux';
import { render } from '@testing-library/react-native';

export function renderWithRedux(renderedComponent){
    const store = configureStore({
        reducer: {
          ...reducers
         },
      });

    return render(<Provider store={store}>{renderedComponent}</Provider>)
}

In this example I use redux toolkit to create my store, but you can use whichever method you like, as long as it generates a valid store at the end

the renderWithRedux function expects renderedComponent and then renders it wrapped in a provider, so you won't have to manually do this every time

at the end, the result of our render is returned

a store is created every time to ensure a clean test state. This is important to ensure each test is running in isolation and hence when you add a new test, you don't risk breaking pre-existing tests, which was a possibility if we didn't take this measure.

Exposing our function globally

With our function created, all we have left to do before we're able to use this function in our codebase is make it globally available in our setup function.

Open our prior created setupTests.js file, and populate it with the following code:

import { renderWithRedux } from "<pathToTestHelpers>/renderWithRedux"; //Not a real file


global.renderWithRedux = renderWithRedux;

in the following piece of code:

global.renderWithRedux = renderWithRedux;

you are extending the global object, and adding a new property called renderWithRedux to it, with the value of our renderWithRedux function.

From this point on we can use this function to render components which rely on redux, so, doing the following:

import ComponentWithReduxData from 'componentWithReduxData'

describe('When rendering a component that uses redux data with the renderWithRedux global', () => {
  it('Should render correctly', () => {
      renderWithRedux(<ComponentWithReduxData />);
  })
})

will be a valid operation, and should mitigate any error related to redux rendering in our application

renderWithRedux returns the exactly same query methods as testing library's render method

There it is, now you can your redux functions using a global function instead of redux boilerplate

Lottie animations in react native

gabrielEloy — Wed, 09 Jun 2021 01:00:12 +0000

This tutorial is also available as a video, you can check it out At YouTube:

Lottie is an easy way of developing Lightweight, scalable animations for websites and applications.
Lottie has been Introduced in 2017 by airbnb. At the time, adding animations to an application was no easy task and ofently resulted in verbose and hard to maintain code, since engineers had to manually recreate the animations in order to use them. The other option was adding a gif or a video to replace the animation, which wasn't as good as programming it, and also made bundle sizes heavy.

"After Effects animations in real time, and allows native apps to use animations as easily as they use static assets." - Airbnb engineering, 2017

Lottie's animations are exported directly from Adobe After Effects in JSON format. That is possible thanks to an AE (After Effects) extension called Bodymovin

Thanks to that, applications can have awesome animations, without the painstaking overhead of re-writing them.

But enough with introductions,Let's build something with lottie, so you can understand its wonders in pratice.

What are we building

this awesome like interaction is what we will be building today. When it gets clicked, it's gradually colored and filled. If it has already been clicked, we run the animation in reverse, returning the heart to its blank, initial state.

Pre requisites

In order to succesfully complete this tutorial you are going to need:

Starting

The first thing we needo to do, is create a react native project, so navigate to your preferred folder and initialize a new react native application. I'm going to name my application "lottieTuto" but you can call yours whatever you like

npx react-native init lottieTuto

Once our application is created, navigate to it and install the following dependencies

lottie-react-native
lottie-ios

you can do this using yarn, with the following command:

yarn add lottie-ios@3.1.8 lottie-react-native

Alternatively, you can use the following command to install them with npm

npm i --save lottie-ios@3.1.8 lottie-react-native

Finding animations

Lottie Files contains an imense catalogue of free animations you can browse in search for the one that fits your app.

We will be using this one today, but feel free to take your time and delight yourself with the awesome animations available at lottie files.

In the selected animation's page, just click in the download button, and choose the lottie json option.

Inside the application we created earlier, create a folder called assets, and save the downloaded file into it.

Now we finally have everything we need to start coding our application

Updating the code

Inside App.js, replace the default code for the following one

//App.js

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.styles}>
      <Text>Hello Lottie!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Now that we have the basic code we are going to work with, is time to import some dependencies:

LottieView
Our animation from the assets folder

then proceed to replace the existent

<Text>Hello Lottie!</Text>

with

//App.js
<LottieView source={like} />

after these changes your code should look like this

//App.js
import React from 'react';
import {View, StyleSheet} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  return (
    <View style={styles.styles}>
      <LottieView source={like} />
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Warning: sometimes when you add LottieView into your code, it breaks your application. If this is happening to you all that you gotta do is reload your app and the error shall disappear

Now you should be seeing the file we downloaded

But our animation, isn't animated yet.

Animating our file

We have many ways of animating a lottie file. The one we are going to use today is by using the progress prop.

The progress prop expects a value ranging from 0 (representing the animation's start) to 1 (representing the animation's end).

All that we need to do in order for our lottie file to be animated, is update this value at a steady pace for a specific range of time.

Thankfully for us react native's Animated module handles this behavior for us.

To use it, we are going to need to import 2 things

useRef - from react
Animated - from react native

with these 2 imports made, create the following constant

const progress = useRef(new Animated.Value(0)).current;

Why are we using useRef ?

Because we want our Animated Value to be created once, instead of everytime our component re-renders, and useRef is perfect for this kind of situation.

now we need to create a function that's going to update progress's value

//App.js
const handleLikeAnimation = () => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

what are we doing in this function exactly ?

Well, Animated.timing is the function responsible for updating our value from one value to another at a steady pace for a specific range of time.

It accepts two parameters, the first one is the value being updated. Note that this value must be an Animated.Value.

The second parameter is an object that must contain these 3 properties.

toValue - your final value
duration - the time required to your value to go from the original value to the final one
useNativeDriver - Check the docs (This one is a little too complex to be explained in one line 😅

We also need to wrap our LottieView inside a TouchableOpacity, since LottieView isn't clickable itself we need a way to call our handleLikeAnimationFunction

after all these changes, this is how our code looks like


import React, {useRef} from 'react';
import {View, StyleSheet, Animated, TouchableOpacity} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;

  const handleLikeAnimation = () => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={handleLikeAnimation} style={styles.opacity}>
        <LottieView progress={progress} source={like} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  opacity: {
    width: 200,
    height: 200,
  },
});

export default App;

Once we have done that, when we click our Heart, its animation is triggered!

But theres one last thing missing. Once our animation has been triggered, pressing it again won't do anything

Thankfully, that's an easy fix.

That happens because our initial value is 0, and we are always updating it to be 1, even when it's already 1. So in order to fix this, you just have to check if your animation state is at the finish (1) or at the begining 0.

This is our application's final code

import React, {useRef, useState} from 'react';
import {View, StyleSheet, Animated, TouchableOpacity} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;
  const [hasLiked, setHasLiked] = useState(false);

  const handleLikeAnimation = () => {
    const newValue = hasLiked ? 0 : 1;

    Animated.timing(progress, {
      toValue: newValue,
      duration: 1000,
      useNativeDriver: true,
    }).start();

    setHasLiked(!hasLiked);
  };

  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={handleLikeAnimation} style={styles.opacity}>
        <LottieView progress={progress} source={like} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  opacity: {
    width: 200,
    height: 200,
  },
});

export default App;

That's it for today folks. I really hope this post has been helpful for you

If you enjoyed this tutorial, please consider subscribing to my youtube's channel: https://www.youtube.com/channel/UC4HtvYKMv7uvcO3CwzCCSDg/featured

and following me on twitter: https://twitter.com/MobileMagic5

Testing react native with testing library

gabrielEloy — Fri, 08 Jan 2021 03:45:43 +0000

What do you think of starting 2021 by learning how to test your applications?

Well, my friends, if that is your goal, I have just the thing for you

I'm starting a youtube channel, in which I'm going to release weekly videos about react native, and if you're into react native, you should definitively give it a check.

The tutorial you're about to read is also available in video format right here

YouTube:

Why use integration tests and testing library?

Integration tests

Integration tests are the easiest way to start testing your applications, simply because they are pretty straightforward.

Your only concern should be going to a top level component, rendering it (and consequently it's children components), and then testing it.

Way much easier than working with unit tests, where the steps are trickier, and achieving a good level of reliability in your application requires you to be more experienced in testing, and even though, you can screw up

"So what you are saying is unit tests are bad ?"

Absolutely not

the thing is, in a real world environment (and in an ideal scenario), you're probably going to want all available types of tests in your application.

But if you are reading this tutorial, the probability is you don't know how to test applications yet, and is looking for somewhere to start.

And integration tests are the best way to start testing your applications, I believe in this thanks to the fact that as I've mentioned before, they are super straightforward and it is relatively easy to cover most test cases using them.

And I don't know about you, but when I work with a tool that "simply works" I tend to keep using it. And if you keep learning about tests and testing your applications, sooner or later you're going to realize that you need other types of tests in your application, and why you need them. Until that moment, integration tests are going to keep your application safe enough.

Testing library

Well, you have probably already heard of testing library. It's a library that gained a lot of popularity in recent times, simply because it changed the way the we think about tests, moving the focus from unity tests, which often ended up testing implementation details, to a way of testing that resembled the way users interact with our application

because of these (and many other reasons that can be checked out in testing library's official page

What we are going to test

I've created a super simple todo app for us to test in this application. It's full scope includes:

Creating items
Deleting items
error handling

I really wanted to keep the app as simple as possible, so all the focus of this article went to the testing itself, rather than to have to explain some fancy feature.

This is the app we are going to test:

You can download it here

Installing testing library

In the application we are going to test, I have already installed testing library, but all that you have to do in order to install it is install the testing-library/react-native as a development dependency.

"Development dependency ?"

Yes, everything test-related isn't necessary for production, hence it doesn't need to go to the production build.

you can install it by using one of the following commands:

Using NPM

npm install --save-dev @testing-library/react-native

Usign yarn: Write a new post Edit Preview ChangeEscolher ficheiroNenhum ficheiro selecionado Remove whenever you render a component using testing library's Upload image

yarn add --dev @testing-library/react-native

Start the testing

When you create a react-native project, a test runner (Jest ) is already configured by default, what means that you don't have to configure anything to get your tests up and running.

All that you have to in order to make jest recognize that you are writing a test, is create a regular fil, but before adding the .js (or tsx) extension to it, you have to add .test or .spec to that file.

I usually like to give my test files the same name as the component they are testing, so, if I was testing the App.js component for instance, My test file would be called App.test.js.

Even though you don't have to use the same name for test files and "tested" files, it makes way easier to keep track of what test refers to what component.

In this application we are going to test the App component

Create a file called App.spec.js (or App.test.js)

and import these files to it

import React from 'react';
import App from './App';
import { render } from '@testing-library/react-native';

We have to import React into our file, because we are going to use jsx in this file, and whenever we are using jsx. That is valid for react versions < 17.x.x. If you are using react version 17 (or higher) JSX transform is going to handle that for you
We have to import the component we are testing (App)
We have to import render from testing library, because that is the method that's going to allow us to interact with our component in our test environment

"But how do we test applications by the way ?"

Testing applications can be simplified to two simple actions

1 - make something inside your application
2 - testing if what you've done generated the expected result

"How does that translate into our code ?"

Let's split this by items

1 - "make something inside your application"

Testing library provides us a lot a helper methods that allow us to interact with our react application, basically the ways in which we can interact with our component are split into 2 categories:

searching for something inside our application
interacting with our application

and we can do both of them using testing library, but I'll cover that in more detail in the next steps of this tutorial

"2 - testing if what you've done generated the expected result"

That's out of testing library jurisdiction. The tool that handles this for us is jest. How this is achieved is by using Matchers

" Jest uses "matchers" to let you test values in different ways. " - Jest's Docs

I know it all sounds a little abstract, but making a long story short, matchers are a way to compare the values your test has generated to the values you expect

"Ok, I already know how to test stuff on an abstract level, but what should I look for when testing ?"

well, testing is all about making your applications reliable, so you should test if your application works. That means that the question you should always ask yourself when testing something is

"How should this work ? what should this application do, and what shouldn't it do?"

whatever the answer to that question is, that is what you should be testing in your application.

Too abstract for you ? ok, let's start testing your application, and hopefully things will become clearer for you

Defining the tests of our application

Basically this application has 5 tests that will ensure the application's functionality

The capability to create one item
The capability to create multiple items
The capability to delete one item
Test if the error warning appears when the user try to create an item with invalid data
Test if the shown error disappears after one valid item is created

So let's create these tests one by one

1 - Creating one item

Before we start testing, we have to know the steps we are going through to fulfill our test.

The necessary steps to create a new item in my application are:

Find the text input
Type something into the text input
Click the button with a plus sign on it

so that is what we are going to do in this specific test. And after following these steps, all that we have to do is check if the taken actions generated the expected result

1.1 finding the text input

The first step to test our application, is to first render the component, so we can interact with it, so let's do it on our code

import React from 'react';
import App from './App';
import { render } from '@testing-library/react-native';

it('Should create an item', () => {
  const { getByText , getByPlaceholderText} = render(<App />);
})

in this code snippet, we have two new "items". One of them is the it function that wraps our test

basically it is the method which runs our test for us.

it requires two parameters, the first one is

"But where does it come from ?"

as you might have noticed, we do not import it anywhere. That is possible because it (and many other methods) is globally available in our test environment. You can read more about jest's globals here

the second thing you probably isn't familiar with, are the getByTextgetByText and getByPlaceholderText methods.

The render method returns us a lot of methods, which can be used by us to inspect the rendered application, and serve this purpose.

Testing library is engineered to make us test applications in the same way our users are going to consume them. And that explains the naming of the 2 functions returned by render

Finding the text input

Usually, the way used to find text inputs using test library, is querying our application, searching for it's placeholder text.

So let's find it in our application, and assign it to a variable

import React from 'react';
import App from './App';
import { render, fireEvent } from '@testing-library/react-native';


it('Should create an item', () => {
  const { getByText , getByPlaceholderText} = render(<App />);

const textInput =  getByPlaceholderText('Write something');
}

Finding the "add item button"

Buttons don't have placeholder texts, so we cannot use the same method used to find the text input when querying for our button.

But there's a text element inside our button, and we can use it to find the button's value, and assign it to a variable

the method used to do so is: getByText

import React from 'react';
import App from './App';
import { render, fireEvent } from '@testing-library/react-native';


it('Should create an item', () => {
  const { getByText , getByPlaceholderText} = render(<App />);

  const textInput =  getByPlaceholderText('Write something');
  const addItemButton = getByText('+');
})

Interacting with our components

Now that we have successfully queried and assigned our components to variables, it's time for us to interact with them.

The way we are going to accomplish this, is by using testing library's method fireEvent

We want to do 2 things. type some text into textInput, and press addItemButton. ]

it('Should create an item', () => {
  const { getByText , getByPlaceholderText} = render(<App />);

  const textInput =  getByPlaceholderText('Write something');
  const addItemButton = getByText('+');

  const createdItemText = 'first todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);
})

at this point, our item should already have been created. But we cannot be sure, because there is nothing to confirm that for us.

to confirm that our item has been created we must query our rendered component looking for it, and then use a matcher to make sure that it exists

import React from 'react';
import App from './App';
import { render, fireEvent } from '@testing-library/react-native';


it('Should create an item', () => {
  const { getByText , getByPlaceholderText} = render(<App />);

  const textInput =  getByPlaceholderText('Write something');
  const addItemButton = getByText('+');

  const createdItemText = 'first todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);

  const createdItem = getByText(createdItemText);

  expect(createdItem).not.toBeNull();
})

this is what the finished code of our first test looks like.

we used one of jest's globals, expect

expect receives a value and has matchers as submethods. Remember when I told you that tests were all about doing something and checking if our actions generated the expected results?

expect is what's going to check the result for us

we used 2 matchers with expect in this test.

the first one is

not

It's a simple negation, it can be translated to javascript's ! operator.

The second one is

toBeNull

which evaluates if the value you passed to expect, is a null value.

when they're combined, our matcher is going to accept any value that isn't null

you can now open your terminal, and run your test using the following command :

yarn test --watch

The --watch flag is going to keep your process running, and listening for changes in your tests, and is going to run the ones that suffered changes. Alternatively if you want to run all tests every time a change occurs, you can use --watchAll instead of --watch

We have just successfully written our application's first test.

Testing for false positives

one of testing's golden rules is to never trust a test you have not seen failing.

It's important to make our tests fail on purpose, so we can make sure that we aren't getting false positives from our tests.

So if you are coding along with this tutorial, change something that is going to break your test and check (search for a text that shouldn't exist on the screen, comment one step of the process, etc) if it really breaks your test's pipeline.

2- Creating multiple items

This test, is going to be very similar to the first one. The only difference, is that we are going to repeat some steps multiple times.

Since we aren't going to do anything new here, I'm going to show you the code right away


it('Should create multiple items', () => {
  const { getByText , getByPlaceholderText} = render(<App />);

  const addItemButton = getByText('+');
  const textInput =  getByPlaceholderText('Write something');

  const createdItemText = 'first todo';
  const createdItemText_2 = 'second todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);

  fireEvent.changeText(textInput, createdItemText_2);
  fireEvent.press(addItemButton);

  const firstCreatedItem = getByText(createdItemText);
  const secondCreatedItem = getByText(createdItemText_2);


  expect(firstCreatedItem).not.toBeNull();
  expect(secondCreatedItem).not.toBeNull();
})

3 - The capability to delete one item

Before deleting one item, we first have to create it, so we are going to reuse the item creation code we have created for the first test, search for the X Text to find the delete item button, and then checking if the item disappeared


it('Should delete an item', () => {
  const { getByText , getByPlaceholderText } = render(<App />);

  const addItemButton = getByText('+');
  const textInput =  getByPlaceholderText('Write something');

  const createdItemText = 'first todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);

  const deleteItemButton = getByText('X');
  fireEvent.press(deleteItemButton);
})

Note that we don't make tests to make sure that our item has been created, that has already been tested, hence, there's no need to test it again

Up until this point, we have found our delete button and pressed it. Now we just have to test if the created item disappeared

"I got this, we have to use getByText, search for the text of the created item, and use a matcher to make sure it's value is null, right ?"

Almost right

The only thing we will do differently is, instead of using getByText, we are going to use queryByText

But Why ?

well, the thing is, whenever we search for a text that doesn't exist in our rendered component using getByText, it throws us the following error

but thankfully for us, this can be easily solved by using query by text.

And adding the deletion verification, our test is going to look like this


it('Should delete an item', () => {
  const { getByText , getByPlaceholderText, queryByText } = render(<App />);

  const addItemButton = getByText('+');
  const textInput =  getByPlaceholderText('Write something');

  const createdItemText = 'first todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);

  const deleteItemButton = getByText('X');

  fireEvent.press(deleteItemButton);

  const deletedItem = queryByText(createdItemText);

  expect(deletedItem).toBeNull();
})

now our test is going to pass and work just as expected

4- Test if the error warning appears when the user try to create an item with invalid data

This error occurs when we try to create an item without text in it.

So to test it, we need to press the add item button without changing the text input, and then verify if the "Please insert a valid text" error is shown on our screen.

There's nothing new, in this test,we're going to use the same methods we've been using until this point

it('Should display an error when trying to create an item without any text', () => {
  const { getByText } = render(<App />);

  const addItemButton = getByText('+');

  fireEvent.press(addItemButton);

  const errorMessage = getByText('Please insert a valid text');

  expect(errorMessage).not.toBeNull();
})

5- Test if the shown error disappears after one valid item is created

This last test is going to be a combination of test n°4 and then test n°1

The first step is to make the error appear

it('Should remove the error message after creating a valid item', () => {
  const { getByText } = render(<App />);

  const addItemButton = getByText('+');

  fireEvent.press(addItemButton);
})

we don't need to make sure the error is being shown because have just tested this in the last test.

and then, create one item, and finally, make sure that the error message isn't present in our test

it('Should remove the error message after creating a valid item', () => {
  const { getByText, getByPlaceholderText, queryByText } = render(<App />);

  const addItemButton = getByText('+');

  fireEvent.press(addItemButton);

  const textInput =  getByPlaceholderText('Write something');

  const createdItemText = 'first todo';

  fireEvent.changeText(textInput, createdItemText);
  fireEvent.press(addItemButton);

  const errorMessage = queryByText('Please insert a valid text');
  expect(errorMessage).toBeNull();
})

and that finishes our last test.

🎉🎉🎉🎉🎉🎉🎉 Congratulations 🎉🎉🎉🎉🎉🎉

We have just tested "an entire application" together

I hope this tutorial helped you understand tests a little better, and realize how straightforward testing with testing library is

If you enjoyed this tutorial, please consider subscribing to my youtube channel :)

Web Assembly from zero to hero - Part 1

gabrielEloy — Sun, 08 Dec 2019 05:47:49 +0000

Much has been said lately about web assembly. How it will kill javascript, how it will not, and lots of other controversial opinions.
But even thought hearing about web assembly is recurrent, very few people really know what is web assembly and what are its benefits, when they should use it, and even if they should use it at all.

So, in order to make it a less confusing topic, I will be writing a series of articles covering from the very basics of web assembly, to making a simple web assembly application

In this first article I will cover, what is web assembly, why it's faster than regular javascript (in a very superficial way. But I will drop some links for those who want to deeply understand the matter), and finally show some examples of applications running it.

What is Web Assembly

"WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications."

This description is taken directly from the web assembly's website main page (https://webassembly.org/)

So, by looking at this description, we can figure out that web assembly is not a programming language. But if it is not a programming language, then what is it ?

web assembly is a compiler target

What is a compiler target ?

In order to understand a compiler target, first we have to understand what exactly is a compiler. Roughly speaking, a compiler is a translator, which (generally) translates the code we give to it, to a lower level code. That is what web assembly is, the result of the compilation from one "high level" (even thought c/c++/Rust aren't as high level as javascript or python, they are still high level languages when compared to machine code).

So, will web assembly kill javascript or not ?

Absolutely not. it's not even its intention. Wasm's main goal is to be an javascript ally, handling heavier and more complex calculations. One of the main proofs that web assembly's goal isn't to replace javascript, is that it doesn't even have access to the DOM API, meaning that it isn't able to change what we see in our html files.

Why it is faster than javascript

The secret of its speed relies on two key factors.

1- Javascript complexity

Javascript is a language designed to be easily understood by humans. What is a double edged blade, because while it is indeed easy to read and write code in javascript (or at least easier than in most languages), this ease comes with a price. In order for javascript to be so "hackable" and having multiple ways of doing the same thing, it has to make a bunch of validations even to do the simplest things. For example

What do you think javascript has to do in order to return you the result of the following ?

const add = (a,b) => {
  return a + b;
}

It should do something pretty simple, right ? Wrong

It has to do a bunch of validations in order to know what it should do with the parameters a and b.

Are a and b strings ? if so, it will concatenate them

const result = add('hello ', 'my friend');

//result will be equal to 'hello my friend';

is b a number, and a an string ? if so, it will turn the number into a string and then concatenate a and b

const result = add(1, ' is a nice number');

//result will be equal to '1 is a nice number';

or even, are a and b numbers ? in that case the numbers will be added, returning a numeric value

const result = add(1, 1);

//result will be equal to '2';

and the validation list looks something like the image bellow, taken from Alex Danilo talk about web assembly in Google I/O 17

Compiling for the Web with WebAssembly (Google I/O '17)

that isn't the case with lower level languages (such as the ones supported by web assembly) since they don't do these verifications and operators tend to have one lexical meaning, instead of many, such as in javascript, where the same operator/instruction oftenly has more than one meaning.

If we went through all this complication just to add two parameters, imagine what kind of validations more complex operations require. Having this whole bunch of code being run makes your application slower

2- Wasm code has to go through fewer steps than javascript in order to be run by the browser

Even thought javascript is a interpreted language and doesn't have to be compiled in order for it to run, modern browsers use JIT's (just in time compilers) to optimize it, making its performance significantly better than it would be otherwise.

This optimization runs in multiple steps, which vary from browser to browser. But if you are seeking a deep understanding of the optimization process, some of its flaws and why web assembly solves problems unsolved by this optimization process, you should check Lin Clark's awesome talk about the subject

Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017

if you don't want to dive that deep into the details, just trust me (and the following image) when i tell you that Wasm code goes trough fewer steps separating the download of the file from its execution,hence it's faster.

Use cases

01 - Video editor demo in Wasm

This first example is just a demo, of a simple web editor running in web assembly displayed in the same page of the same editor, but running completely in javascript. The performance of both implementations is shown and compared in the page

02 - Figma

Figma is one of the most widely known web assembly cases, because it is one of the first applications to use it in production, and probably the one of the most relevant ones. And they even wrote an article about their use of web assembly

03 - Google Earth

Google earth also uses web assembly in order to make the rendering of its complex 3d shapes possible in the web. Similarly to figma, they also have a post explaining its use of web assembly

Now we finally know what Wasm is, why it is fast and some tools that are already using it 🎉🎉🎉🎉🎉

This was only the first part of a series about web assembly. If you liked it, please:

Follow me on Twitter: @gabriel__eloy
Stay tuned for the next parts of this series