1

I'm working on a solid-js project. For some time now, none of the buttons in my application react when clicked. Although I did not make any code changes before the bug appeared. To fix this issue related to my buttons, I deleted then reinstalled my node_modules folder, shut down then restarted my computer, updated my library dependencies. But none of these attempts solved my problem. So I performed tests on one of my buttons. None returned a positive result and I get the same error on both my tests. There she is:

TypeError: Cannot read properties of undefined (reading 'name')
 ❯ devComponent node_modules/.pnpm/solid-js@1.4.8/node_modules/solid-js/dist/dev.js:543:26
    541|   c.observerSlots = null;
    542|   c.state = 0;
    543|   c.componentName = Comp.name;
       |                          ^
    544|   updateComputation(c);
    545|   return c.tValue !== undefined ? c.tValue : c.value;

This error comes from a file contained in my folder node_modules as specified on the error message. I don't know why I am getting this error yet I have updated all my library dependencies to the latest version. Here is a snippet of my dev.js file where the error is coming from, it is contained in my node_modules folder:

function devComponent(Comp, props) {
  const c = createComputation(() => untrack(() => {
    Object.assign(Comp, {
      [$DEVCOMP]: true
    });
    return Comp(props);
  }), undefined, true);
  c.pending = NOTPENDING;
  c.observers = null;
  c.observerSlots = null;
  c.state = 0;
  c.componentName = Comp.name;
  updateComputation(c);
  return c.tValue !== undefined ? c.tValue : c.value;
}

Here is the content of my test file:

import { screen, render, fireEvent } from 'solid-testing-library';
import { describe, expect,it ,  test } from 'vitest';
import { Messenger } from '../components/header/Messenger';


describe('<Messenger />', () => {
  it('create an instance', async () => {
  const { component } = render(() => <Messenger />);
  expect(await screen.findByRole('button', { name: 'Click me!' }));
  expect(component).toBeInTheDocument();
  });


  it('This changes text on click',async () => {
    const { component } = render(() => <Messenger />);
    expect(component).toBeInTheDocument();
    fireEvent.click(component);
    expect(await screen.findByRole('button', { name: 'Test this!' })).toBeInTheDocument();
    });
  
})

I use vitest for my tests and the component file to test is here:

import { Link } from "solid-app-router";
import { SiMessenger } from "solid-icons/si";
import { createResource, createSignal, Match, Show, Switch } from "solid-js";

export default function Messenger() {
  const [clicked, setClicked] = createSignal(false);
  const [resource] = createResource(fetchMessenger);

  function toggle() {
    setOpen((o) => !o);
  }

  return (
    <>
      <button
        onClick={() => setClicked(true)}
        className="block p-2 md:p-3 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600  text-black dark:text-white "
      >
        <SiMessenger className="text-xl" />
      </button>
      {clicked() ? 'Test this!' : 'Click me!'}

I don't know how to solve this problem.

gks
  • 191
  • 1
  • 4
  • 18
  • 1
    Add the code that's supposed to set `Comp`. – Barmar Jul 28 '22 at 15:48
  • Are you talking about my node_modules file or tested component file – gks Jul 28 '22 at 15:54
  • The error message says that `Comp` is undefined. Without knowing where that comes from, it's hard to debug this. – Barmar Jul 28 '22 at 15:54
  • Since this is in a third-party library, it probably comes from some parameter that your application supplies, and you're not supplying a correct value. – Barmar Jul 28 '22 at 15:56
  • The problem is that it was working fine before but without me making any changes, my buttons no longer work. And even though it was badly formatted code, it should have affected one or a few of my buttons by all. – gks Jul 28 '22 at 16:04
  • This might actually be a bug. Would it be possible for you to create a minimal reproduction with stackblitz/codesandbox and make a new issue on the solid-js repo? – thetarnav Jul 28 '22 at 16:30

1 Answers1

0

Try using screen.debug() and see if the input is there. If not, the lifecycle methods might not be completing: this scenario would cause a failure since you're using find. You can add try this:

await waitFor(() => expect(screen.findByRole('button', { name: 'Test this!' })).toBeInTheDocument()));
blu
  • 372
  • 1
  • 10
  • I tested your solution but got a syntax error instead, please kindly show me how to use this method, if possible with sample code. More info in my question, thanks. – gks Jul 28 '22 at 20:17
  • My mistake, updated answer. – blu Jul 29 '22 at 16:14
  • I tested your solution, it solved my syntax error well but the problem I asked this question for is still the same. I get an error from a library file. – gks Jul 29 '22 at 19:27
  • Maybe the author changed the casing on their file / folder and your system is case sensitive? resulting in an unresolved object? – blu Aug 08 '22 at 07:02