From 04006e10651096078afb908f893e7f64bfbf7674 Mon Sep 17 00:00:00 2001
From: Aman Srivastava <89743268+amansrv@users.noreply.github.com>
Date: Sat, 27 Nov 2021 10:30:51 +0530
Subject: [PATCH] React Testing With Testing Library.md
React Testing With Testing Library
---
.../React Testing With Testing Library.md | 196 ++++++++++++++++++
1 file changed, 196 insertions(+)
create mode 100644 Frontend_Web_Development_React_Angular_Vue/React/Week 9/React Testing With Testing Library.md
diff --git a/Frontend_Web_Development_React_Angular_Vue/React/Week 9/React Testing With Testing Library.md b/Frontend_Web_Development_React_Angular_Vue/React/Week 9/React Testing With Testing Library.md
new file mode 100644
index 0000000000..2af2bd4214
--- /dev/null
+++ b/Frontend_Web_Development_React_Angular_Vue/React/Week 9/React Testing With Testing Library.md
@@ -0,0 +1,196 @@
+# **"React Testing With Testing Library"**
+
+## **Introduction:**
+
+* Testing Library has become the most sought after library compared to the rival enzyme.
+* Many people, organisations are already adopting Testing Library over Enzyme.
+* If you are using the latest version of creating react app tool then you already have Jest and Testing Library already installed for you.
+
+
+*Let’s dive in and see how to test a simple component.*
+
+
+
+* As usual, let’s create our app with the following command. **I named my project testex** but feel free to name whatever you prefer.
+
+> npx create-react-app testex
+
+* Now time to cd into our project and start the app
+> cd testex && npm start
+
+* Now let's create a components folder and create a component named Body.
+
+> Body.js created
+
+
+> Example:
+
+ import React, { useState } from "react";
+ const Body = ({title}) => {
+ //local state
+ const [count, setCount] = useState(0)
+ //click event handler for button
+ const handleClick = () => {
+ setCount(count+1)
+ }
+ return (
+
+
{title}
+
{count}
+
+
+ )
+ }
+ export default Body;
+
+* It’s time to reuse our component in the App.js file. Let’s update the App.js as below.
+
+> Example:
+
+ import React from 'react';
+ import './App.css';
+ import Body from './components/Body';
+
+ function App() {
+ return (
+
+
+
+ );
+ }
+ export default App;
+
+*If everything is fine at your end, you should have a functional app as below rendering in your browser.*
+
+## **Now to initiate the tests, run the following command on the terminal (project root).**
+
+> npm test
+
+* Now the test suit should initialize and kick in. You may already see that one test case is already passing.
+
+* Keep the test suit running in the terminal. It’ll give you a real-time update as we write our test cases.
+
+* It’s a good practice to write our test cases inside the __tests__ folder. Let’s create the folder and create the file Body.test.js.
+
+
+*Let’s begin by importing the essentials.*
+
+> Example:
+
+ import React from 'react';
+ import Body from '../Body';
+ import {render} from '@testing-library/react';
+ import userEvent from '@testing-library/user-event';
+
+ describe("This suit is to test the Body component", ()=>{
+ })
+
+
+> Note:
+
+* **“describe”** is a way to group our test cases together.
+* It’ll come in handy when you have hundreds of tests written.
+* You can choose to run only selected test cases. But at this juncture, it doesn’t make much sense, but let’s follow the best practices.
+
+## **Snapshot Testing**
+
+Time to write our first test case. First, we’ll write a snapshot test. Snapshot test is actually going to keep a copy of your component, whenever you change something the test suit will inform you that something has been changed in your component. If you think its a necessary change, you can always choose to accept the new change.
+
+> Example:
+
+ import React from 'react';
+ import Body from '../Body';
+ import {render} from '@testing-library/react';
+ import userEvent from '@testing-library/user-event';
+
+ describe("This suit is to test the Body component", ()=>{
+ test('Snapshot of Body', () => {
+ const {asFragment} = render(
);
+ expect(asFragment()).toMatchSnapshot()
+ });
+ })
+
+
+* The moment you write the test case (it can begin with either test or it keyword). You could see that, test suit has created the snapshot of your component inside __snapshots__ folder.
+
+* Just to double-check whether the snapshot is working fine, let’s change something in the Body.js. You can simply add a new p tag and throw in some random string. Now, the test case will fail and you would see an error in the terminal. Don’t worry, just press the key u it’ll just automatically update the snapshot that is stored locally. If the u the option is not provided to you first, you may press w and then you’ll get the u option.
+
+## **Finding Elements in DOM**
+
+* Next step is to find elements in the DOM and check the value on them. Let’s start by checking whether the title prop we passed in is actually rendering on the screen.
+
+* This time we’ll pass in a value for props and see whether that prop is available by writing a test case as below.
+
+> Example:
+
+ import React from 'react';
+ import Body from '../Body';
+ import {render} from '@testing-library/react';
+ import userEvent from '@testing-library/user-event';
+
+ describe("This suit is to test the Body component", ()=>{
+ test('Snapshot of Body', () => {
+ const {asFragment} = render(