DEV Community: TulusIbrahim

How to Test React Component Using Jest

TulusIbrahim — Sun, 09 Jul 2023 13:14:28 +0000

In this tutorial, we will learn how to do unit testing to a react component using Jest. Jest is a testing framework that works with react, node, vue, and other tools with focus on simplicity. Unit test aim to make sure that one component is behave as expected despite many variations of props passed to it. The expectation here could be come from the design system.

Some of the benefit of unit testing are:
Make sure the code, design, implementation is behave as expected.
Give the developer confident when about to do some refactoring, knowing that they have safety net about the component code.
For the record I will use nextjs in this tutorial. Follow the installation guide on nextjs docs about jest here. After the step is done, now we are good to go.

Ok let’s get to the code

Let’s start by creating a test file with .test.ts(.test.js if you use js) extension. Where to place the file is about your preference, but there are convention to place it within the tests folder in the root folder or next to the component itself. So for example if you have button/index.tsx, then the test file would be in the button/index.test.ts, right next to the component file.

Ok let’s start importing some stuff to begin with

We import import ‘@testing-library/jest-dom’; so we can get access to test the DOM state, and some essential utilities from @testing-library/react to test the component.

This is what a single test block look like. First give the test a clear name so we can undertand it better. You can render any component within the render method, in this case we want to render the button with a text within it. Render method return various function to assert the DOM state, but there we are destructuring the getByText function. Within the getByText function, you can use a string to find a text or a regex expression as well.

Another example is when we want to test the interaction with the component, we want to check if the onClick function actually called when we tapped on the button, we could create a mock function by writing let fn = jest.fn(); then pass it as a function to onClick props. Render the component, after it rendered, we fire an event by calling fireEvent.click. To target which DOM to click, we need to find it by findByText. Then we can expect the mock function fn is have been called.

If we run yarn test in the terminal, we can see the result as below.

Use Custom Hook to Separate Logic & UI in React

TulusIbrahim — Sat, 11 Jun 2022 02:52:59 +0000

In this article, I will show you how to separate the concern between logic and UI when building react app. Let’s get started.

Have a look at below code example.

It’s a simple react counter app that works just perfectly fine. At this stage, your component will not have any problem by having two method inside it. But imagine as your component grow, the method inside it will increase, and your component will harder to debug, and so many lines in one file. This is where custom hook come in handy to separate between your logic and your actual UI.

Now let’s create another file called useCounter, since our main component called counter, or whatever you like, but the name of the function is highly recommend to have use word in front of it as it state in react docs.

In this file, we move all our method and state inside our main component to here. It would be look like code below.

We have move all our method to here, and notice that in the end, we return all the value and method that our main component will need. Now move back to our main component and import these from our custom hook like below.

Now our code will look much cleaner and readable because it’s only concern about the UI, and only import all the method and value from the custom hook. This also make the method inside the hook is reuseable for other component that need it. Thank you for reading, see ya!

Tricks to Debug JavaScript Faster

TulusIbrahim — Fri, 27 May 2022 03:38:02 +0000

If you’re a developer, you might find yourself tired after writing the same console.log() syntax to check your current variable value. Here are some ways to log your values faster.

Create Log Function

You can create this function on top of your JavaScript file, or create it in separate file if you want to use it in multiple files. This function pretty simple, it look like this.

function log(...params){
    console.log(...params)
}

Notice that we use spread operator both in the function parameter and console.log statement because we want to iterate all the item passed to the parameter, and print it to the console.log statement.

Somewhere below in your JavaScript file you can use this function like regular console.log statement.

let yourVariable = 'Print me!';
log(yourVariable)

or something like,

log('this is the data: ', yourVariable)

Create a snippet

If you’re using vscode as code editor, you can click a gear setting in left bottom, and choose user snippets. You can choose existing snippet or create a new one. You can write the snippet like below.

"log": {
   "prefix": "getlog",
   "body": "console.log()"
}

The log key is just the name of the snippet, but the prefix value is the word that you will type in the editor to get the body value. So if I type getlog in my vscode, a console.log suggestion will appear as I type.

That’s it! Thank you for reading, see ya!🍻

Using React Hooks to Get Input Value

TulusIbrahim — Thu, 05 Aug 2021 02:01:34 +0000

Hi! Today we will learn how to use react hooks in a simple way in order to get strong basic fundamental in react hooks.

The first thing we need to set up is of course react JS environment which you can refer to their documentation. If all is ready, then we are good to go!

First Step

Lets open up project file then open App.js file, there you can start by importing react and hooks useState so we can use it later. Here is how it looks.

import React, { useState } from 'react'

Next is creating function called App, here we using functional component so it is aligned because we are going to use react hooks.

function App(){

}
export default App;

Don’t forget to import it in the end of our code so it does not produce error.

Second Step

function App(){
const [name, setName] = useState('')
const [password, setPassword] = useState('')
}

There we define name, setName. Name is the variable that we can use to display the value it has. Meanwhile setName is the setter method that we can use to change the value of name. useState is to define the initial value of the Name, it can be empty string, empty array, boolean, etc. To get better explanation of react hooks, you can refer to their docs.

Third Step

We need to provide return inside our App component so it will display something to the screen.

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div>
      <input placeholder="username" onChange={e => setName(e.target.value)} />
      <input
        placeholder="password"
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={() => handleInput()}>Input</button>
      {name ? <p>Welcome {name}!</p> : ''}
    </div>
  );
}

Looks terrible? yes. Calm down, I’ll explain it.

So the first thing is we create a div tag, which will wraps up all other element. There I added some style to the div tag.
Next is we define two input tag, a button with some placeholder in it
Then we define onChange props inside input tag. Inside onChange props we define anonymous function that has e parameter, so then we can get access to the value inside input tag. (The anonymous function is using arrow function, you can check it through W3School if you’re not familiar yet with it.)
Then inside anonymous function, we call the setter method that I already explain before, and we also pass the e parameter inside setter method, so the value of name, password is change every time the value inside input tag is changing.

const handleInput =  () =>{
    console.log(name, password)
  }

There I also add a button with handleInput method just to console.log it to make sure everything is works.
Beneath the button, I added ternary operator to show some text if the name variable is filled with something.

Here is the looks of the whole code that we write so far.

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  const handleInput =  () =>{
    console.log(name, password)
  }

  return (
    <div>
      <input placeholder="username" onChange={e => setName(e.target.value)} />
      <input
        placeholder="password"
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={() => handleInput()}>Input</button>
      {name ? <p>Welcome {name}!</p> : ''}
    </div>
  );
}
export default App

Wrap’s up! Those three simple step is enough to use hooks in simple way just to get started and get solid basic understanding about react hooks. Thank you for reading up to this point, see ya!✨

Building Backend Website With Supabase

TulusIbrahim — Mon, 02 Aug 2021 15:10:25 +0000

If you’re a front end web developer, you definitely doesn’t have any difficulties while deploying web app to hosting services like github pages, vercel, etc.. Especially if it is only static website, portfolio, or landing page.

But when it comes to uploading the back end part, I sometimes get confused how to do it. I know I could upload the database to heroku using postgres, but another problem comes in when mostly we developing the database using mysql in local environment, and many other things related to backend that I don’t really familiar with.

Lately I have a personal project that need a user authentication, a database to store some data. I know I could use firebase to make it happen, but I think it’s too much for a personal project. Not long after that, I see someone from twitter that recommended someone else to use supabase just to store some simple data. I got curious, and finally I found solution for my personal project.

Supabase is a backend as a platform (BaaS) service, where you can directly create your database there, having user authentication for your website, etc.. They offer three main product such as database, storage, authentication. I personally only use database and authentication.

So basically we just call API that supabase generated automatically for us to do any operation we want, and we can keep easily deploying website in github pages, vercel, or other web hosting.

In my opinion, their interface is good, especially in table editor section, I could get started quickly with it to arrange database design like I want. They also provide feature like foreign key relation in our tables, which is good for me.

They also provide auto generated docs for us on how to fetch data from our tables and other operation like edit, update, delete data. It’s really simple to read all rows from your table, you can just like

let { data: blog, error } = await supabase
.from('blogs')
.select('*')

DISCLAIMER: I made the project in react

I need the foreign key relation to link between post and comments, and also maintaining the ‘comment tables’. So when particular post is deleted, the comment attached with that post is deleted too.

Another thing I’ve done with supabase is authentication. They provide many method like signIn, signUp, session , etc.. It’s really convenient for us from front end to do it. For example, when someone wants to login, we can just write code this simple

const { user, session, error } = await supabase.auth.signIn({
email: 'emailFromUser',
password: 'passwordFromUser',
})

Conclusion
I finally able to create backend without having to upload my own backend code and all the configuration that I need to do. I hope this article help you, thank you for reading this post.