What am I missing that This test is failing?

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);
});

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.