This is the Component
import React from "react";
const UseStateCounter = () => {
const [value, setValue] = React.useState(0);
return (
<>
<section data-test="counter" className={{ margin: "4rem 0" }}>
<h2>regular counter</h2>
<h1 data-test="counter-value">{value}</h1>
<button
onClick={() => setValue((prev) => prev - 1)}
data-test="btn-decrease"
className="btn"
>
decrease
</button>
<button
onClick={() => setValue((prev) => prev + 1)}
data-test="btn-increase"
className="btn"
>
increase
</button>
<button
onClick={() => setValue((prev) => 0)}
data-test="btn-reset"
className="btn"
>
reset
</button>
</section>
</>
);
};
export default UseStateCounter;
and this is the testing page
import { shallow } from "enzyme";
import React from "react";
import Counter from "./5-useState-counter";
import Enzyme from "enzyme";
import EnzymeAdapter from "@wojtekmaj/enzyme-adapter-react-17";
Enzyme.configure({ adapter: new EnzymeAdapter() });
const setup = (props = {}) => {
return shallow(<Counter />);
};
test("should render withour error", () => {
const wrapper = setup();
expect(wrapper.find(`[data-test="counter"]`).length).toBe(1);
});
test("state,controlled input field", () => {
const mockSetCurrentGuess = jest.fn(); // useState returns an array and this is the second item of the array
React.useState = jest.fn(() => [0, mockSetCurrentGuess]);
const wrapper = setup();
const button = wrapper.find(`[data-test="btn-increase"]`);
button.simulate("click");
expect(mockSetCurrentGuess).toHaveBeenCalledWith(1);
});