Transition not working in tests

[JoosepAlviste]

Hi!

I ran into an issue where I tried to write tests for a component that uses the <Transition> component, but it doesn't seem like it works in tests (using Vitest with solid-testing-library).

I also reproduced it in Stackblitz here: https://stackblitz.com/edit/vitest-dev-vitest-fhrobg?file=test/Hello.test.jsx (see the Hello.jsx component and its tests). The tests can be run with npm run test. Removing the wrapping Transition component seems to make the tests pass.

From my brief debugging, it seems like the createComputed watcher here: https://github.com/solidjs/solid-transition-group/blob/main/src/Transition.ts#L119 does not get triggered after clicking the button in tests (but it does seem to be triggered in the browser). I tried to reproduce that with the Children component, but it does seem to work there, so I'm not really sure what to do next.

Is it possible that there's some issue with this in the Node environment? Also, maybe an example somewhere of how to write a test for a component that uses Transition would be nice?

[ryansolid]

Yeah need to make sure that the browser export condition or mainfield is being used in node. Is it possible that nothing reactive in your test suite updates? I haven't used Vitest yet but I know there was some stuff to do around configuration to get it to work properly. Not sure if there are any hints in here: https://dev.to/lexlohr/testing-your-solidjs-code-in-vitest-6dh

[DavynCox]

I was able to get around this issue by mocking the <Transition> component in the test file using vi.mock:

vi.mock("solid-transition-group", () => ({
  ...vi.importActual("solid-transition-group"),
  Transition: (props) => {
    return <div>{props.children}</div>;
  },
}));

This turns the <Transition> component into a basic div element, allowing the children to render in the test.