`Comp is not a function` when testing a component that has an exported SVG

[Henrique Ramos]

When rendering a component that includes an imported svg using solid-testing-library it throws a TypeError: Comp is not a function.

Component code

<For each={props.items()}>{props.renderItem}</For>
          <Show when={props.infiniteScroll !== undefined}>
            <div
              use:observer={(el) => {
                if (el.isIntersecting) props.infiniteScroll?.onLoadMore?.();
              }}
              class="py-2"
            >
              <Spinner />
            </div>
          </Show>

Test suite

it('renders items', () => {
  const itemsResponse = ['1', '2'];
  const [items] = createSignal(itemsResponse);
  const { getByText } = renderDropdown({ items });
  
  expect(getByText(itemsResponse[0])).toBeInTheDocument();
});

This test suite, and all the others, pass when removing the SVG. Any thoughts on this? Thanks in advance

[kkharji]

@hnrq have you figured out a solution to this issue, I'm using storybook and running into the same issue.

[Henrique Ramos]

@hnrq have you figured out a solution to this issue, I'm using storybook and running into the same issue.

I believe that I just copied all the svg content into a solid component and removed the dependency in the end 😅

[Jorge Godoy]

I haven't worked with solid-testing-library neither storybook. To investigate the problem, I just created a repo to setup storybook with this plugin, and I figured out that the message TypeError: Comp is not a function is displayed when the plugin wasn't set in the main.js file. Also I had to add "types": ["vite-plugin-solid-svg"], to the tsconfig.json file to fix others typescript warnings. See this commit jfgodoy/storybook-vite-solid-svg@25a533e with the changes that make this plugin works without any typescript error.

[kkharji]

😍 @jfgodoy you rock!. I had a feeling it was config issues but being so new to js I couldn't figure it out. Thanks @jfgodoy

[Jorge Godoy]

thank you @kkharji, you made my day.

[Mike Holloway]

For anyone else that hits this, I just want to spell out the solution that @jfgodoy gave us:

const Solid = require("vite-plugin-solid");
const path = require('path')
const solidPlugin = require('vite-plugin-solid');
const solidSvg = require('vite-plugin-solid-svg');

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/html",
  core: {
    builder: "@storybook/builder-vite",
  },
  features: {
    storyStoreV7: true,
  },
  // solid support
  async viteFinal(config, { configType }) {
    config.plugins.unshift(Solid({ hot: false }));
    config.plugins.push(solidPlugin(), solidSvg())

    config.resolve.alias = {
      ...config.resolve.alias,
      '~': path.resolve(__dirname, '../src/')
    }

    return config;
  },
};