{"id":3264,"date":"2022-10-04T17:33:32","date_gmt":"2022-10-04T17:33:32","guid":{"rendered":"https:\/\/explore.techenutia.com\/?p=3264"},"modified":"2022-12-28T15:39:27","modified_gmt":"2022-12-28T15:39:27","slug":"unit-testing-in-react-introduction","status":"publish","type":"post","link":"https:\/\/manorinfinity.com\/blog\/2022\/10\/04\/unit-testing-in-react-introduction\/","title":{"rendered":"Unit Testing In React: Introduction"},"content":{"rendered":"\n

Unit testing is an important part of the Software development life cycle and unit tests are written and executed by developers in which the smallest testable units of the code are tested to check whether the individual functionality is working as intended. The main aim of unit testing is to find bugs in the isolated functionality and improve the quality of code.<\/p>\n\n\n\n

ReactJS is the popular JavaScript library for building complex user interfaces encapsulating the functionality into reusable, isolated, and independent smaller components.<\/p>\n\n\n\n

We will be using Jest<\/strong>, a JavaScript test runner which will execute all our unit tests, and React-testing-library<\/strong> to write the actual unit tests where we will be checking the behavior of our component (rather than the implementation details of the code<\/em>) as supposed the way end user will be interacting with.<\/p>\n\n\n\n

Now let’s start the writing unit tests.<\/p>\n\n\n\n

Step 1<\/strong><\/h2>

Create a new react app using the below command<\/p><\/div><\/div><\/div>\n\n\n\n

npx create-react-app unit-test-demo\n<\/code><\/pre>\n\n\n\n
open package.json<\/strong> and you can ensure that both jest and react-testing-library will be installed by default so nothing needs to be installed manually.<\/p>\n\n\n\n
Step 2<\/strong><\/h2>
Create a simple component named UserData which accepts value through props and just displays that on the screen. So testing this is fairly easy and there will be only 2 scenarios to check when the userName is passed and when not.<\/p><\/div><\/div><\/div>\n\n\n\n
import { React } from \"react\";\n\nconst UserData = ({ userName }) => {\n  return (\n    <div data-testid=\"username\">\n        {userName?userName:'Anonymous'}\n    <\/div>\n  );\n};\nexport default UserData;\n<\/code><\/pre>\n\n\n\n
Note<\/strong>: I have provided data-testid<\/code> an attribute to the div using which we can easily find our element using getByTestId<\/code>and There are other ways to select the elements also eg ByRole, ByText, ByTagName…<\/p>\n\n\n\n
Step 3<\/strong><\/h2>
Now create the file naming UserData.test.jsx<\/strong> which will help jest to identify and run the test file.<\/p><\/div><\/div><\/div>\n\n\n\n
What is the basic structure of testing code block? Let’s understand that first<\/p>\n\n\n\n