SolidJS•2y ago

solid-transition-group leads to reactivity warning inside test cases

Hey folks, we just started using solid-transition-group and as soon as the <Transition />-component is present, all of our test cases start throwing the computations created outside a createRoot or render will never be disposed- error. If we remove the transition the error disappears. Any idea what could cause this? The component in question looks like this:

const Snackbar = () => {
  return (
    <Transition
      onEnter={(element, done) => {
        const animation = element.animate(
          [
            { transform: "translate(-50%, -100%)" },
            { transform: "translate(-50%, 0%)" },
          ],
          {
            duration: 400,
          }
        );
        animation.finished.then(done);
      }}
      onExit={(element, done) => {
        const animation = element.animate(
          [
            { transform: "translate(-50%, 0%)" },
            { transform: "translate(-50%, -100%)" },
          ],
          {
            duration: 400,
          }
        );
        animation.finished.then(done);
      }}
    >
      <Show when={toastSelectors.firstToast()}>
        {(firstToast) => (
          <Toast
            id={firstToast().id}
            kind={firstToast().kind}
            message={firstToast().message}
          />
        )}
      </Show>
    </Transition>
  );
};

const Snackbar = () => {
  return (
    <Transition
      onEnter={(element, done) => {
        const animation = element.animate(
          [
            { transform: "translate(-50%, -100%)" },
            { transform: "translate(-50%, 0%)" },
          ],
          {
            duration: 400,
          }
        );
        animation.finished.then(done);
      }}
      onExit={(element, done) => {
        const animation = element.animate(
          [
            { transform: "translate(-50%, 0%)" },
            { transform: "translate(-50%, -100%)" },
          ],
          {
            duration: 400,
          }
        );
        animation.finished.then(done);
      }}
    >
      <Show when={toastSelectors.firstToast()}>
        {(firstToast) => (
          <Toast
            id={firstToast().id}
            kind={firstToast().kind}
            message={firstToast().message}
          />
        )}
      </Show>
    </Transition>
  );
};

Thanks in advance

4 Replies

Alex Lohr•2y ago

Probably the jsdom animation events doing something non-standard. I wouldn't worry about that as long as the tests are working (so try to break them at least once).

oneiroOP•2y ago

Thanks for the quick response (as always 🙂 ) - is there a way to turn these off inside those test suites. It's a bit noisy 😉 (our tests still work fine, though)

Alex Lohr•2y ago

Sorry, I'm a bit busy at the moment and this needs some careful consideration.

oneiroOP•2y ago

No worries, I am not at all in a rush with this one 🙂

Gaming

Programming

solid-transition-group leads to reactivity warning inside test cases