With Vitest getting "computations created outside a createRoot or render will never be disposed"

[captDaylight]

I'm following the new documentation for Vitest closely and getting this error for each of my custom elements used in the test:

computations created outside a `createRoot` or `render` will never be disposed

Following this code snippet, I'm even getting this error with a simple button component:

import { render } from '@solidjs/testing-library';
import Button from '../src/Button';
import { describe, expect, it } from 'vitest';
import '@testing-library/jest-dom';
describe('Button', () => {
  it('should render the button', () => {
    const { getByText } = render(() => <Button>SolidJS</Button>);
    expect(getByText('SolidJS')).toBeInTheDocument();
  });
});

[atk]

Without seeing your vite(st) config and the code of the Button you are using, I could only take wild guesses at the source of the issue.

[captDaylight]

Thanks for quick response @atk

// vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import path from 'node:path';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    solidPlugin(),
    dts({
      insertTypesEntry: true
    })
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'components',
      fileName: 'index'
    },
    target: 'esnext',
    rollupOptions: {
      external: ['solid-js']
    }
  },
  test: {
    environment: 'jsdom',
    transformMode: {
      web: [/\.[jt]sx?$/]
    },
    deps: {
      inline: [/solid-js/]
    },
    threads: false,
    isolate: false
  }
});

And my Button component looks like:

import { clsx } from 'clsx';
import { JSX, Show, mergeProps, splitProps, createMemo } from 'solid-js';

export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'naked';
export type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';

export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  iconLeft?: JSX.Element;
}

export default function Button(props: ButtonProps) {
  const merged = mergeProps({ variant: 'primary', size: 'lg' }, props);
  const [otherProps, buttonProps] = splitProps(merged, ['variant', 'size', 'children', 'iconLeft']);

  const buttonClasses = createMemo(() =>
    clsx('font-semibold', {
      'shadow-sm': otherProps.variant !== 'naked',
      // etc, more styles
    })
  );

  return (
    <button {...buttonProps} class={buttonClasses()} type="button">
      <Show when={otherProps?.iconLeft}>{otherProps?.iconLeft}</Show>
      {merged.children}
    </button>
  );
}

[atk]

Thanks for your reply, I'll try to replicate the issue.

[atk]

Sorry that it took so long. The issue is the deps: { inline: [/solid-js/] } part of your vite.config.ts. It causes vitest to create a separate definition for solid-js that is delivered inline, whereas the tests get the version loaded from the node loader. Solid does not work if there are multiple versions of it trying to access the same state, which causes the error.

It seems the documentation was already fixed, because there's no mention of deps on this site anymore.

[captDaylight]

Not long at all, very fast!

I modified my test to comment out the deps like in the documentation, but my tests fail with this change:

  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/]
    },
    // deps: { inline: [/solid-js/] },
    setupFiles: ['../../node_modules/@testing-library/jest-dom/extend-expect.js'],
    threads: false,
    isolate: false
  }

[atk]

That is curious, they ran fine for me with that one change. Unfortunately, it's quite late here, so I hope to find more time to help you tomorrow.

[andrezero]

Hey there 👋

Running into this issue in a new setup (setting up a complex monorepo).

computations created outside a `createRoot` or `render` will never be disposed.

This ☝️ shows up once per test.

I have tried all combinations of config and the issue persists. I am afraid it might be more than just noise and more complex tests .

I have branched the repository for reproduction. sake.

Moving on with my sprint, might have more details once I start adding the actual production code.

Help appreciated 🙇

[andrezero]

Possibly related: #1426