Test React Component in Jest/Enzyme

I am new at react testing, written below code and having few issues, could someone please help me to resolve below issue?

my question is

1.why the test named should call onChange method on input is failing, and any other solution for it?
2. As per report fetch, then and catch method is untested, any way to test it.

my App.js file is like below.

import React, { useState, useEffect } from "react";
import "./App.css";

export default function App() {
  const [data, setdata] = useState([]);
  const [searchId, setSearchId] = useState("");

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts?userId=${searchId}`)
      .then((Response) => Response.json())
      .then((data) => setdata(data))
      .catch((err) => {return err})
  }, [searchId]);

  const defaultArticle = [{ userId: 'none', title: 'none', body: 'none'}]

  if(data.length === 0){
    setdata(defaultArticle)
  }

  const handleCange = (e) => {
    setSearchId(e.target.value);
  };

  return (
    <div className="App">
      <h1>Article List</h1>
      <div className="searchBox">
        <input
          type="text"
          placeholder="Enter user ID"
          onChange={(e) => handleCange(e)}
        />
      </div>
      <div className="itemsSec">
        {data.map((articles, index) => (
          <div key={index} className="items">
            <h4>
              <span style={{ fontWeight: "bold" }}>ID:</span> {articles.userId}
            </h4>
            <p>
              <span style={{ fontWeight: "bold" }}>Title: </span>
              {articles.title}.
            </p>
            <p>
              <span style={{ fontWeight: "bold" }}>Content: </span>
              {articles.body ? articles.body : 'null'}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

I have written test cases as below.

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { shallow, mount } from 'enzyme';
import App from './App';
import toJson from 'enzyme-to-json';

Enzyme.configure({ adapter: new Adapter() });

afterEach(cleanup)

describe('TextField component', () => {

it('render without crash', () => {
  render(<App />);
});

it("renders correctly", () => {
  const tree = shallow(<App />);
  expect(toJson(tree)).toMatchSnapshot();
});

 it("renders header", () => {
  const wrapper = shallow(<App />);
  const heading = <h1>Article List</h1>;
  expect(wrapper.contains(heading)).toEqual(true);
});

it.skip("contains ID", () => {
  const wrapper = mount(<App />);
  const value = wrapper.find("h4").text();
  expect(value).toEqual("ID: none");
});

it('should call onChange method on input', () => {
  const onChange = jest.fn();
  const event = {
    target: { value: 1 }
  };
  const component = shallow(<App />);
  component.find('input').simulate('change', event);
  expect(onChange).toHaveBeenCalled();
});

});

my terminal test output is like below

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   81.25 |       75 |    62.5 |   81.25 | 
 App.js   |      80 |       75 |    62.5 |      80 | 10-12
 fake.js  |       0 |        0 |       0 |       0 | 
 index.js |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 skipped, 4 passed, 6 total
Snapshots:   1 passed, 1 total
Time:        3.35 s
Ran all test suites.

my question is

1. why the test named should call onChange method on input is failing, and any other solution for it?
2. As per report fetch, then and catch method is untested, any way to test it.