DEV Community: Sumit Arora

Getting Started React Native Testing Library

Sumit Arora — Mon, 18 Jan 2021 13:49:20 +0000

Let's take a look at what we will be testing. Below is the screenshot of the minimal application, which displays the list of users. Each user card is a User component and within each is a Role component rendering the tag based on the user role. There is also a button to select/deselect each user.

To make use of the testing library, you need to install it. The react-native starter is pre-configured to make use of jest to run tests. It works for the testing library.

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

Let's start with the Role component. It is a UI component displaying the user role and changing the tag color based on the Role which gets assigned to the user.

const Role = ({role}) => {
  const backgroundColor = COLORS[role];

  return (
    <View
      style={{
        backgroundColor,
        marginTop: 5,
        paddingVertical: 5,
        paddingHorizontal: 10,
        borderRadius: 15,
        justifyContent: 'center',
      }}>
      <Text style={{fontSize: 10}}>{role}</Text>
    </View>
  );
};

To write the unit test for the component, we have to test two pieces of functionality. One correct color gets assigned, and the right text is displayed.

To create an instance of the component, we use the render method from the testing library.

const rendered = render(<Role role={'Admin'} />);

To check for text we use getByText method provided by lib.

const tag = rendered.getByText('Admin');

If text exists within your rendered component function will pass the test; else, it will fail. There are other similar methods to be used from the library.

getByText
getByPlaceholderText
getByDisplayValue
getByTestId and more.

Next, we need to check for the backgroundColor for the component. We access the component instance we got above and use it to get the color property and check it. We can do it all in a single test as below.

it(`renders admin correctly`, () => {
  const rendered = render(<Role role={'Admin'} />);
  const tag = rendered.getByText('Admin'); 
  expect(tag.parent.props.style.backgroundColor)
    .toBe(COLORS.Admin);
});

Now we come to the User component, which renders user information, displays role tag, and allows the user to select/deselect. We have to check for information getting rendered, button appearance, and click event being dispatched.

Starting by rendering the component, we do it in a similar way we have done above. Then checking if the correct text is present in it.

const isSelected = false;
    const user = {
      name: {
        first: 'Sumit',
        last: 'Arora',
      },
      email: 'sumit@mail.com',
      role: 'Admin',
      picture: {},
    };

    const rendered = render(
      <User isSelected={isSelected} user={user} />,
    );
    rendered.getByText('Sumit Arora');
    rendered.getByText('sumit@mail.com');
    rendered.getByText('Admin');

In the above code, we render the User component by using the render method from the testing library by providing mock data to it. Then we check if all the expected values are present in the rendered component.

After checking the text, we come to the Button. We will first test its appearance and then functionality. To check UI, we get the instance of Button using the getByText method and check its text color and' parent containers backgroundColor.

  const button = rendered.getByText('Select');
  expect(button.props.style.color).toBe('#000000');

  expect(button.parent.props.style.backgroundColor)
    .toBe('#00b4d8');

Last we need to check the click functionality of the Button. For that, we create a mock function and pass it down to the component. We will leverage fireEvent method from the testing library and call the function and check the jest function invocation.

it(`renders admin correctly when not selected`, () => {
  const isSelected = false;
  const user = {
    name: {
      first: 'Sumit',
      last: 'Arora',
    },
    email: 'sumit@mail.com',
    role: 'Admin',
    picture: {},
  };
  const selectUser = jest.fn();

  const rendered = render(
    <User isSelected={isSelected} user={user} select={selectUser} />,
  );
  rendered.getByText('Sumit Arora');
  rendered.getByText('sumit@mail.com');
  rendered.getByText('Admin');

  const button = rendered.getByText('Select');
  expect(button.props.style.color).toBe('#000000');
  expect(button.parent.props.style.backgroundColor)
    .toBe('#00b4d8');

  fireEvent(button, 'onPress');
  expect(selectUser).toHaveBeenCalledWith(false);
});

Full Source code can be found here: https://github.com/app-demos/ReactNativeTesting

Photo by Shahadat Rahman

Disclaimer: There are other ways to test the similar functionality also. Above is just one of the ways to do so.

Digital Ocean Hackathon Submission - Part 2

Sumit Arora — Sun, 10 Jan 2021 01:30:32 +0000

What I built

I am building a game which I have named Watch The Block. It is a memory game focusing on remembering the old and new states. As a player, the game is straightforward; you must remember the most recent added Block to the game board. The more blocks you guess, the more points you score. It also has a ticking timer to keep players on their toes.

Category Submission:

Random Roulette

App Link

https://watch-the-block.sumitarora.dev/

Screenshots

Description

Watch the Block is a memory game focusing on remembering old and new states. As a player, the game is straightforward; you must remember the most recent added Block to the game board.

Link to Source Code

https://github.com/sumitarora/watch-the-block-angular

Permissive License

MIT

Background

One of the resolutions for 2021 I made is to write more and engage more with the community — what better way than to be part of a hackathon.

How I built it

I have built it using Angular. Digital Ocean is being used to deploy the static site. There is no backend as the only thing I am storing is user scores for which I am using firebase.

Photo by Christopher Gower

Digital Ocean Hackathon Submission - Part 1

Sumit Arora — Fri, 08 Jan 2021 02:15:14 +0000

Background:

One of the resolutions for 2021 I made is to write more and engage more with the community — what better way than to be part of a hackathon. I have been an avid Heroku user and have been using it for a while now. I loved the simplicity and ease with which you can deploy any application without many efforts. So when I heard about the App platform from Digital Ocean, I was excited to try it out. I have been learning about it for a month now and like how easy it is to deploy static and dynamic websites with ease. I will share my journey and comparisons in future posts.

What I am building:

Category Submission:

Random Roulette

How I built it

I have build it using Angular. Digital Ocean is being used to deploy the static site. There is no backend as the only thing I am storing is user scores for which I am using firebase.

Stay Tuned for more...

Photo by Christopher Gower