Skip to content

haneabogdan/react-form-unit-test-example

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Form Unit Test Example

Example of unit testing React form with Jest and Enzyme

This is a simple React form unit test example. On submit, it pops up an alert that displays values from the form. Using yarn as a package manager.

Testing examples include:

  • Snapshot testing on stateless component
  • Testing props on stateless component
  • Text input change handler testing
  • Multi Select change handler testing
  • Checkbox change handler testing
  • Form submit event testing

Reference

Running Test

yarn test

Starting the app

yarn start

Set up

(1) Create-react-app to create a project. When the project folder is already created

npx create-react-app ./

When the folder needs to be created at the same time

npx create-react-app my-app 

Instead of npx, we can also use npm or yarn as below

npm init react-app my-app
yarn create react-app my-app

(2) Install modules for testing create-react-app uses Jest as a unit testing framework. All we need is the two extra modules below.

yarn add enzyme enzyme-adapter-react-16 --dev
yarn add react-test-renderer --dev

(3) Add bootstrap This example uses bootstrap for styling.

yarn add bootstrap

To use bootstrap in the component, import the module as below.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

About

Example of unit testing React form with Jest and Enzyme

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.5%
  • HTML 1.5%