Useful functions for tests integrated with React

Overview

RTL-HELPERS

Useful functions for tests integrated with React

Installation

Use the package manager npm to install rtl-helpers.

npm install rtl-helpers

Usage

import renderWithRouterAndRedux from 'rtl-helpers';
import { renderWithRedux, renderWithRouter } from 'rtl-helpers';

Functions

renderWithRouterAndRedux

  • 1st parameter: component to be rendered
  • 2st parameter: Reducer, prefer to create a file with the "rootReducer" of all reducers combined
  • 3st parameter: A settings object:
{
    initialState = {}, // Default State
    store = createStore(rootReducer, initialState), // if you do not pass a store by parameter, a new one will be created
    initialEntries = ['/'], // if you want to redirect to some URL
    history = createMemoryHistory({ initialEntries }), // if you want a history
  }

Example

 renderWithRouterAndRedux(<App />, {
   initialState: initialStateMock, initialEntries: ['/customers'],
 });

renderWithRouter and renderWithRedux

the renderWithRouter function takes the parameters:

  • 1st component to be rendered
  • 2nd optional URL
The renderWithRedux function receives the same parameters as the renderWithRouterAndRedux function but it does not provide the history to the rendered components

Required Libraries

import React from 'react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Authors

@wendryosales

The function was not created by me.

License

ISC

You might also like...
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.

Netflix-Clone A Netflix clone I created for the sake of practicing React and Redux. It features design patterns recommended by the documentation. Some

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics
A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

React features to enhance using Rollbar.js in React Applications

React features to enhance using Rollbar.js in React Applications

A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS.
A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS.

React Typescript Zingmp3 A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS. Working application Checkout: https://60a609

A React & react-router-powered implementation of Hacker News using its Firebase API.
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

Engin Demiroğ, Java + React bootcamp HRMS project front-end codes (React JS).
Engin Demiroğ, Java + React bootcamp HRMS project front-end codes (React JS).

HRMS-front-end Engin Demiroğ, Java + React bootcamp HRMS project front-end codes. Spring Boot Back-end Project Job Advertisements Filters Pagination R

Twitter Clone built using React, Firebase, Material UI and React Flip Move.

Twitter Clone with ReactJS You can send a simple tweet in this app. Twitter Clone Demo Link click me for demo. Topics Material UI React Flip Move Auth

react-blog: a personal blog system written in React
react-blog: a personal blog system written in React

🖥️react-blog:用React写的一款个人博客系统,有博客展示页面和后台管理页面,可以管理文章、分类、标签、相册、说说、时间轴、留言、友链等信息。

State managment library for React and React Native apps

State managment library for React and React Native apps

Owner
Wendryo
Hi, I'm a web developer and I hope you like to my repositories :)
Wendryo
Server-rendered React using Vercel Edge Functions.

sveltekit-on-the-edge but on top of React. It uses esbuild for bundling and Vercel Edge Functions for SSR.

Vercel Labs 185 Dec 29, 2022
Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Oxygem 1.2k Jan 7, 2023
Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Rowy 4.1k Dec 29, 2022
A monitoring/debugging UI tool for Azure Durable Functions

Durable Functions Monitor A monitoring/debugging UI tool for Azure Durable Functions Azure Durable Functions provide an easy and elegant way of buildi

Microsoft 110 Dec 29, 2022
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

SarvarKhalimov 8 Jun 22, 2022
olx-clone using react js , firease as backend ,deployed in firebase , react-router,context,react hooks,olx web app project

OLX clone Start your own website like Olx in minutes with help of Sijeesh Miziha's Olx-Clone React App. Olx-Clone is the potential classified advertis

Sijeesh Miziha 43 Dec 29, 2022
netflix clone using react js, css, axios, themoviedb, get api, netflix-clone react simplified project, axios-react

Netflix Clone React js This project is a simplified front end clone of Netflix. It was created with React.js and CSS,It uses the famous Javascript lib

Sijeesh Miziha 10 Aug 18, 2022
React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal

React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal (build with pure react no library), tabs, and others.

Friday Ameh 2 Dec 7, 2021
☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

null 3 Aug 19, 2022
React Reduction - Free Admin Template Built with React and Bootstrap4

React Reduction - Free Admin Template Built with React and Bootstrap4 Preview You can check out live preview. Quick Start Clone the repo git clone htt

Reduction Theme 1.4k Jan 3, 2023