Scribd
Upload
9 views

Day25 ReactJS Redux Testing Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Day25 ReactJS Redux Testing Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Narasimha

Sr. Corporate Trainer, Mentor


Narasimha
Sr. Corporate Trainer, Mentor
Week5 – React JS
Day21 : Introduction, Components
Day22 : Events, State, Apply Styles
Day23 : Server Calls / AJAX, Form Validations
Day24 : SPA, React Hooks, Class Components
Day25 : Redux, Unit Testing
Narasimha
Sr. IT Trainer/Consultant
Narasimha
Sr. IT Trainer/Consultant
What is Redux?

• Redux is a pattern and library for managing and


updating application state, using events called
“actions”.
• It serves as a centralized store for state that needs to
be used across your entire application, with rules
ensuring that the state can only be updated in a
predictable fashion.
Introduction to Redux

• Redux is an open-source JavaScript library


• It is used for managing application state.
• It is most commonly used with libraries such as React
or Angular for building user interfaces.
• Similar to Facebook's Flux architecture
• It was created by Dan Abramov and Andrew Clark.
A few things to consider before using redux

• You have large amounts of application state that are


needed in many places in the app
• The app state is updated frequently
• The logic to update that state may be complex
• The app has a medium or large-sized codebase, and
might be worked on by many people
• You need to see how that state is being updated over
time
Flux vs Redux
How Redux Works?
Component

Component

Component
Environment Setup

1. npm i redux --save


2. npm i react-redux --save
3. npm i @reduxjs/toolkit --save
Exploring The Core Redux Concepts

1. Store
2. Actions
3. Reducers
Exploring The Core Redux Concepts
1. store: it brings the actions and reducers together, holding
and changing the state for the whole app — there is only one
store.

2. actions: these are objects that should have two properties,


one describing the type of action, and one describing what
should be changed in the app state.

3. reducers: these are functions that implement the behavior


of the actions. They change the state of the app, based on the
action description and the state change description.
How Redux Works?
Steps

1. Create reducer function


2. Create Store using redux library with reducer function
3. Use <Provider/> to share the store to components
4. Use Redux hooks to communicate with store:
useSelector, useDispatch
5. Perform the operations using dispatch
Steps
import { legacy_createStore as createStore } from 'redux';

// Reducer Function
const bankReducer = (state, action) =>
{

};

// Create Store
const bankStore = createStore(bankReducer);
export default bankStore;
Steps
<Provider store={bankStore}>
<BankApp />
</Provider>
Steps
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";

function BankApp()
{
const [amount, setAmount] = useState(0);
let currentBalance = useSelector((state) => state.balance);
const dispatch = useDispatch();
}
Narasimha
Sr. IT Trainer/Consultant
Redux Tookit

What is Redux Toolkit?


• Redux Toolkit is a set of tools that helps simplify Redux
development.
• It includes utilities for creating and managing Redux
stores, as well as for writing Redux actions and
reducers.

npm i @reduxjs/toolkit --save


Slices in Redux Toolkit

• -A "slice" is a collection of Redux reducer logic and


actions for a single feature in your app, typically
defined together in a single file.
• The name comes from splitting up the root Redux state
object into multiple "slices" of state.
Steps to implement

1. Create the slice with reducer functions


2. Create the store with reducer
3. Provide the store to application level
4. Perform the operations.
Practical Implementation
Narasimha
Sr. IT Trainer/Consultant
Unit Testing
• What and Why?
• Understanding Different Kinds of Tests
• What To Test and How To Test?
• Understanding the Technical Setup and Involved Tools
• Running a First Test
• Writing Our First Test
• Grouping Tests Together With Test Suites
• Testing User Interaction and State
• Testing Components, etc…
What is unit testing?
• Unit can be the smallest part of an application that is testable.
Eg: individual function, method, etc.
• Software developers are the ones who write the unit test cases.
• The aim here is to match the requirements and the unit’s expected
behavior.
• Performed before Integration testing
• Finding issues/bugs at an early stage
E2E Testing

Integration Testing

Unit Testing

Levels of Testing
AAA Pattern in Unit Testing
AAA Pattern
Act
01 Arrange 02 This is the middle step of a unit test. In this
This is the first step of a unit test application. Here step we will execute the test i.e. we will do the
we will arrange the test, in other words we will do actual unit testing and the result will be
the necessary setup of the test. obtained .

03 Assert
This is the last step of a unit test application. In
this step we will check and verify the returned
result with expected results.
Unit Testing Frameworks for React
• Jest
• React Testing Library
• Enzyme

> npm i --save react-test-renderer


> npm i --save jest
> npm i --save enzyme
Hands-On Implementation

You might also like