update tests and read me

Author: yaodingyd

README.md

@@ -1,8 +1,6 @@
 React Flickity Component
 =======================
 
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-
 # Introduction:
 A React.js Flickity component.
 
@@ -16,6 +14,9 @@ npm install react-flickity-component
 
 # Usage:
 
+## V5 Updates
+V5 supports react v19 and above. 
+
 ## V4 Updates
 V4 only supports react v18 and above. V4 also comes with an esmodule bundle format to support modern frontend tooling like vite.
 If you are staying on react v16, please keep using v3. 

__tests__/component.spec.jsx

@@ -3,53 +3,60 @@ import {it, expect, vi, afterEach } from 'vitest';
 import { render, cleanup, screen, waitFor } from '@testing-library/react';
 import Flickity from '../src';
 
-afterEach(() => {
+afterEach(async () => {
+  await new Promise(resolve => setTimeout(resolve, 0));
   cleanup();
 });
 
 
-it('Calls render and componentDidMount', () => {
-  const componentDidMountSpy = vi.spyOn(Flickity.prototype, 'componentDidMount');
-  const renderSpy = vi.spyOn(Flickity.prototype, 'render');
-
-  render(<Flickity/>);
-
-  expect(componentDidMountSpy).toHaveBeenCalledOnce();
-  expect(renderSpy).toHaveBeenCalled();
+it('Renders component successfully', async () => {
+  const { container } = render(<Flickity/>);
+  
+  await waitFor(() => {
+    expect(container.firstChild).toBeTruthy();
+  });
+  
+  expect(container.firstChild).toBeInstanceOf(HTMLElement);
 });
 
 it('Renders children', async () => {
-  const { getAllByAltText } = render(
+  const { getAllByAltText, unmount, container } = render(
     <Flickity>
       <img src="/images/placeholder.png" alt="children"/>
       <img src="/images/placeholder.png" alt="children"/>
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
     );
+  
+  await waitFor(() => {
+    expect(container.firstChild).toBeTruthy();
+  });
 
   await waitFor(() => expect(getAllByAltText('children').length).toEqual(3));
+  unmount();
 });
 
-it('Renders a static carousel', () => {
-  const { getAllByAltText, rerender } = render(
+it('Renders a static carousel', async () => {
+  const { getAllByAltText, unmount } = render(
     <Flickity static>
       <img src="/images/placeholder.png" alt="children"/>
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
     );
 
-  expect(getAllByAltText('children').length).toEqual(2);
-})
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(2));
+  unmount();
+});
 
-it('Reload carousel even it\'s static', () => {
-  const { getAllByAltText, rerender } = render(
+it('Reload carousel even it\'s static', async () => {
+  const { getAllByAltText, rerender, unmount } = render(
     <Flickity static reloadOnUpdate>
       <img src="/images/placeholder.png" alt="children"/>
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
     );
 
-  expect(getAllByAltText('children').length).toEqual(2);
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(2));
 
   rerender(
     <Flickity static reloadOnUpdate>
@@ -58,5 +65,7 @@ it('Reload carousel even it\'s static', () => {
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
   );
-  expect(getAllByAltText('children').length).toEqual(3);
-})
+  
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(3));
+  unmount();
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flickity-component",
-  "version": "4.0.7",
+  "version": "5.0.0",
   "description": "react flickity component",
   "files": [
     "dist"

src/index.tsx

@@ -115,12 +115,6 @@ class FlickityComponent extends Component<ReactFlickityComponentProps, FlickityC
     }
   }
 
-  componentWillUnmount() {
-    if (this.flkty) {
-      this.flkty.destroy();
-    }
-  }
-
   setReady() {
     if (this.state.flickityReady) return;
     const setFlickityToReady = () => this.setState({ flickityReady: true });