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 😊
