Added more tests, better type checks

.npmignore

@@ -13,6 +13,7 @@ webpack.*.js
 .vscode
 example
 license.md
-dist/flatten.d.ts
+dist/*.d.ts
 dist/*.map
-.nyc_output
+.nyc_output
+!dist/react-anime.d.ts

src/types.ts

@@ -44,7 +44,7 @@ export type AnimeValue =
     | ((el: Element, index?: number) => string | number);
 
 export type AnimeProps = {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     delay?: ((el: Element, index?: number, len?: number) => number) | number;
     duration?: ((el: Element, index?: number, len?: number) => number) | number;
     autoplay?: boolean;
@@ -53,7 +53,7 @@ export type AnimeProps = {
     easing?: Easing;
     elasticity?: number;
     round?: number | boolean;
-    component: React.ComponentType;
+    component?: React.ElementType;
     begin?: Function;
     update?: Function;
     complete?: Function;

tests/__snapshots__/basic.tsx.snap

@@ -1,16 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`2 children delayed fade in 1`] = `
+exports[`1 child delayed fade in 1`] = `
 <DocumentFragment>
   <div>
     <p>
       1
     </p>
   </div>
-  <div>
-    <p>
-      2
-    </p>
-  </div>
 </DocumentFragment>
 `;

tests/__snapshots__/custom-components.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom components 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      <p>
+        1
+      </p>
+    </div>
+    <p />
+    <p>
+      2
+    </p>
+    <p />
+    <div>
+      <p>
+        3
+      </p>
+    </div>
+    <div>
+      <p>
+        4
+      </p>
+    </div>
+    <div>
+      <p>
+        5
+      </p>
+    </div>
+    <div />
+  </div>
+</DocumentFragment>
+`;

tests/custom-components.tsx

@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import Anime from '../src/react-anime';
+
+const MyComponent = (props) => <div>{props.children}</div>;
+
+//snapshot test
+it('custom components', () => {
+    const tree = render(
+        <div>
+            <Anime component={null}>
+                <p>1</p>
+            </Anime>
+            <Anime component="p">
+                <p>2</p>
+            </Anime>
+            <Anime component={MyComponent}>
+                <p>3</p>
+                <p>4</p>
+                <p>5</p>
+            </Anime>
+            <Anime/>
+        </div>
+    );
+    expect(tree.asFragment()).toMatchSnapshot();
+});

tests/svg-paths.tsx

@@ -1571,6 +1571,5 @@ class SvgPaths extends React.Component {
 //snapshot test
 it('svg paths', () => {
     const tree = render(<SvgPaths />);
-
     expect(tree.asFragment()).toMatchSnapshot();
 });