`Comp is not a function` when testing a component that has an exported SVG
hnrq opened this issue ยท 6 comments
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
@hnrq have you figured out a solution to this issue, I'm using storybook and running into the same issue.
@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 ๐
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.
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;
},
};