Merge pull request #2334 from FormidableLabs/use-animation-state-fix

Fix for #2329 (use-animation-state crashing charts)

Author: gksander

packages/victory-chart/src/victory-chart.test.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { VictoryChart } from "victory-chart";
 import { VictoryAxis } from "victory-axis";
+import { VictoryLine } from "victory";
 import { render, screen, fireEvent } from "@testing-library/react";
 
 describe("components/victory-chart", () => {
@@ -98,4 +99,16 @@ describe("components/victory-chart", () => {
       expect(clickHandler).toHaveBeenCalled();
     });
   });
+
+  describe("animation", () => {
+    it("handles basic animation parameters without crashing", () => {
+      const { container } = render(
+        <VictoryChart animate={{ duration: 2000, easing: "bounce" }}>
+          <VictoryLine />
+        </VictoryChart>,
+      );
+
+      expect(container.querySelector("svg")).toBeTruthy();
+    });
+  });
 });

packages/victory-core/src/victory-util/hooks/use-animation-state.js

@@ -24,7 +24,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
   // This is a copy of Wrapper.getAnimationProps
   const getAnimationProps = React.useCallback(
     (props, child, index) => {
-      if (!props.animate) {
+      if (!props?.animate) {
         return child.props.animate;
       }
       const getFilteredState = () => {
@@ -60,7 +60,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
   // This is a copy of Wrapper.setAnimationState
   const setAnimationState = React.useCallback(
     (props, nextProps) => {
-      if (!props.animate) {
+      if (!props || !props.animate) {
         return;
       }
       if (props.animate.parentState) {