“TypeError：無法讀取未定義的屬性（讀取'名稱'）”在我的 node_modules 文件中

Question

我正在做一個solid-js 項目。 一段時間以來，我的應用程序中的任何按鈕在單擊時都沒有反應。 雖然在 bug 出現之前我沒有做任何代碼更改。 為了解決與我的按鈕相關的這個問題，我刪除然后重新安裝了我的 node_modules 文件夾，關閉然后重新啟動我的計算機，更新了我的庫依賴項。 但是這些嘗試都沒有解決我的問題。 所以我對我的一個按鈕進行了測試。 沒有返回一個肯定的結果，我在我的兩個測試中都得到了同樣的錯誤。 她在這里：

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;

此錯誤來自錯誤消息中指定的我的文件夾 node_modules 中包含的文件。 我不知道為什么會收到此錯誤，但我已將所有庫依賴項更新到最新版本。 這是錯誤來自的dev.js文件的片段，它包含在我的 node_modules 文件夾中：

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;
}

這是我的測試文件的內容：

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();
    });
  
})

我使用 vitest 進行測試，要測試的組件文件在這里：

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!'}

我不知道如何解決這個問題。

Answer 1

嘗試使用 screen.debug() 並查看輸入是否存在。 如果沒有，生命周期方法可能無法完成：這種情況會導致失敗，因為您正在使用find 。 您可以添加試試這個：

await waitFor(() => expect(await screen.findByRole('button', { name: 'Test this!' })).toBeInTheDocument()));