Event :

class App extends React.Component {

constructor(props){

super(props);

this.state={ count: 1}

handleClick(type){

this.setState(prevState => {

return {count: type == 'add' ? prevState.count + 1: prevState.count - 1}

});

render() {

return (

<div>

Count: {this.state.count}

<br/>

<div style={{marginTop: '100px'}}/>

<button onClick={this.handleClick.bind(this, 'add')} value='Inc'/>

</div>

export default App;

Then open : package.json

Under Script :

Update with Below :

npm install jest jest-junit jest-junit-reporter --save react react-dom react-scripts --save-dev jest react-addons-
test-utils enzyme enzyme-adapter-react-16

Open New terminal from file, then run

npm install npm@latest -g

npm install jest

npm install

npm audit fix

Then finally test 😊

Hello World :
import React, { Component } from 'react';

import { configure } from 'enzyme';

import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

//create a component called App and render Bonjour in it

class App extends React.Component {

render() {

return (

<div>

<h1>Bonjour</h1>

</div>

);

export default App;

Then open : package.json

Under Script :

Update with Below :

npm install jest jest-junit jest-junit-reporter --save react react-dom react-scripts --save-dev jest react-addons-
test-utils enzyme enzyme-adapter-react-16

Open New terminal from file, then run

npm install npm@latest -g

npm install jest

npm install

npm audit fix

Then finally test 😊

Props :
Housefull.js

class HouseFull extends React.Component {

render() {

if(this.props.hasSeat) {

return(

<div>Vacancy</div>

);

} else {

return(

<div>HouseFull</div>);

export default HouseFull;

index.js

ReactDOM.render(<HouseFull hasSeat = '{true}'/>, document.getElementById('root'));

Then open : package.json

Under Script :

Update with Below :

npm install jest jest-junit jest-junit-reporter --save react react-dom react-scripts --save-dev jest react-addons-
test-utils enzyme enzyme-adapter-react-16

Open New terminal from file, then run

npm install npm@latest -g

npm install jest

npm install

npm audit fix

Then finally test 😊

Life Event :
constructor(props){

super(props);

this.state={ count: 1}

handleClick(type){

this.setState(prevState => {

return {count: type == 'add' ? prevState.count + 1: prevState.count - 1}

});

componentWillMount() {

console.log('Component WILL MOUNT!')

componentDidMount() {

console.log('Component DID MOUNT!')

componentWillUpdate(nextProps, nextState) {

console.log('Component WILL UPDATE!');

 }

componentDidUpdate(prevProps, prevState) {

console.log('Component DID UPDATE!')

render() {

return (

<div>

Count: {this.state.count}

<br/>

<div style={{marginTop: '100px'}}/>

<button onClick={this.handleClick.bind(this, 'add')} value='Inc'/>

</div>

Then open : package.json

Under Script :

Update with Below :

npm install jest jest-junit jest-junit-reporter --save react react-dom react-scripts --save-dev jest react-addons-
test-utils enzyme enzyme-adapter-react-16

Open New terminal from file, then run

npm install npm@latest -g

npm install jest

npm install

npm audit fix

Then finally test 😊