Предупреждение выдается из-за обновления ForwardRef при тестировании компонента, анимированного с помощьюact-spring с помощью @ testing-library / реагировать - PullRequest
0 голосов
/ 07 марта 2020

У меня есть компонент, анимированный с помощью react-spring с помощью крючка useSpring. Примерно так:

function Toggle({ handleToggle, toggled }) {
  const x = useSpring({
    x: toggled ? 1 : 0
  });
  return (
    <div className={styles.switch} onToggle={handleToggle} data-testid="switch">
      <animated.div
        className={styles.circle}
        style={{
          transform: x
            .interpolate({
              range: [0, 0.4, 0.8, 1],
              output: [0, 5, 10, 16]
            })
            .interpolate((x) => `translateX(${x}px)`)
        }}>
        &nbsp;
      </animated.div>
    </div>
  );
}

При тестировании компонента выдается предупреждение:

Warning: An update to ForwardRef inside a test was not wrapped in act(...).

      When testing, code that causes React state updates should be wrapped into act(...):

      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/docs/test-utils.html#act
          in ForwardRef (created by Toggle)
          in Toggle

Код для моего теста:

test("Toggle works", () => {
    let toggled = false;
    const handleToggle = jest.fn(() => {
      toggled = true;
    });
    const { getByTestId, queryByTestId } = render(
      <Toggle toggled={toggled} handleToggle={handleToggle}/>
    );
  });

Как мне проверить компоненты, анимированные с помощью react-spring с использованием @testing-library/react?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...