I am using jest and enzyme to test my components. If i have the following class component
import React, { Component } from "react";
export class Test extends Component {
state = {
isLoading: false,
};
onClick = () => {
this.setState({ isLoading: true });
};
render() {
return (
<div>
<button onClick={this.onClick}>Click button</button>
</div>
);
}
}
export default Test;
then to write test for this i will use:
import {Test} from "../Test";
import { shallow } from "enzyme";
import React from "react";
it('default state value for isLoading should be false', () => {
const wrapped = shallow(<Test/>);
const initialIsLoading = wrapped.state('isLoading');
expect(initialIsLoading).toBe(false);
})
it('change isLoading true on button click', () => {
const wrapped = shallow(<Test/>);
const initialIsLoading = wrapped.state('isLoading');
console.log(initialIsLoading);
wrapped.find('button').simulate('click');
wrapped.update();
const newValue = wrapped.state('isLoading');
console.log(newValue);
expect(newValue).toEqual(true);
})
but if my component is functional then i get error - state cannot be used on functional components
when i run my tests.
How can i test my functional components state ?