React Application 'npm test' Warning - reactjs

Question

I created a React application for practice. It works in my browser; however when I ran "npm test" from my terminal, it giving me a warning "Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. Please check the code for the FetchOne component."
I checked the FetchOne component but I couldn't figure it out. Is there anybody help me out, thank you!
Here is my code:
import React, {Component} from 'react';
const API = 'https://hn.algolia.com/api/v1/search?query=';
const DEFAULE_TITLE = 'N/A title';
class FetchOne extends Component{
constructor(){
super()
this.state=({
hits: [],
isLoading: false,
error: null,
})
}
componentDidMount(){
this.setState({ isLoading: true })
fetch(API)
.then(response =>{
if(response.ok){
return response.json()
}else{
throw Error('Somethig went wrong...')
}
} )
.then( data => this.setState({
hits: data.hits,
isLoading: false,
}))
.catch(error => this.setState({
error,
isLoading: false
}))
}
render(){
const { hits, isLoading, error } = this.state;
if(isLoading){
return <p> Loading... </p>
}
if(error){
return <p>{error.message}</p>
}
return(
<div>
{hits.map(data =>
<ul key={data.objectID}>
<li>Title:<a href={data.url}> {data.title || DEFAULE_TITLE}</a></li>
<li>Author: {data.author}</li>
<li>Points: {data.points}</li>
</ul>
)}
</div>
)
}
}
export default FetchOne
Click HERE for Error Massage Screenshot

Answer 1

I had a similar issue previously. The issue related to the fact that the component had unmounted but I was still making a setState call. This can happen when using async functions and passing a callback which includes setState to test if this is the case.
Create
componentWillUnmount() {
console.log("Fetch One Unmounted");
}
Then see if the setState is called after the message appears.
componentDidMount(){
this.setState({ isLoading: true })
fetch(API)
.then(response =>{
if(response.ok){
return response.json()
}else{
throw Error('Somethig went wrong...')
}
} )
.then( data => this.setState({
hits: data.hits,
isLoading: false,
}, () => {console.log("setState Called")}))
.catch(error => this.setState({
error,
isLoading: false
}))
}