I encounter the following error:
Error: FIRESTORE (9.6.2) INTERNAL ASSERTION FAILED: Unexpected state
while trying to test my React component:
export default function ImageList() {
const [imagesUrl, setImagesUrl] = useState([]);
useEffect( () => {
const unsubscribe = getImages(setImagesUrl);
return () => unsubscribe();
}, []);
return (
// JSX
)
}
getImages is a function that subscribes to Firebase Firestore with onSnapShot function:
import { collection, onSnapshot from "firebase/firestore";
import { database } from "./setup";
const getImages = ( handleResponse ) => {
const unsubscribe = onSnapshot( collection(database, "/images"), snapshot => {
const _imagesUrl = [];
snapshot.forEach((doc) => {
const data = doc.data();
_imagesUrl.push(data.imageUrl);
});
handleResponse(_imagesUrl);
} )
return unsubscribe;
}
export default getImages;
Below is my test component:
import { render, screen } from '@testing-library/react';
import ImageList from "./ImageList";
test("list of images exist", async () => {
render( <ImageList /> );
const imgElement = await screen.findByRole("img");
expect(imgElement).toBeInTheDocument();
})
I have followed this Stack Overflow answer to isolate my React component with Firebase logic so that I can test each of them separately with React Testing Library and Jest, but it does not seem to work in my case.
Do you know I can resolve this issue?