Scribd
Upload
24K views

ReactJs HandsOn

The document provides instructions for setting up a React project to use Jest for testing. It includes installing Jest and related packages, updating the scripts in package.json, and examples of creating simple React components and rendering them to test basic functionality.

Uploaded by

Mahesh VP
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24K views

ReactJs HandsOn

The document provides instructions for setting up a React project to use Jest for testing. It includes installing Jest and related packages, updating the scripts in package.json, and examples of creating simple React components and rendering them to test basic functionality.

Uploaded by

Mahesh VP
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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 😊

You might also like