Solid-js项目按钮无响应及TypeError读取name属性异常求助

核心错误原因 #

报错Cannot read properties of undefined (reading 'name')本质是组件导入方式不匹配，导致传入devComponent的Comp参数为undefined，进而触发读取name属性失败。

具体问题拆解 #

1. 导入方式错误：Messenger组件用export default导出，但测试文件使用命名导入{ Messenger }，导致导入结果为undefined。
2. 组件内部语法/逻辑漏洞：
   • toggle函数调用未定义的setOpen
   • createResource依赖的fetchMessenger函数未声明
   • JSX缺少闭合标签</>
   • 按钮点击逻辑仅设置clicked为true，无切换逻辑
3. 测试用例逻辑问题：直接点击render返回的根节点而非按钮元素，且部分expect缺少断言方法

分步修复方案 #

1. 修正组件导入方式 #

修改测试文件的导入语句：

// 错误写法
import { Messenger } from '../components/header/Messenger';

// 正确写法
import Messenger from '../components/header/Messenger';

2. 修复Messenger组件内部问题 #

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

// 补全缺失的fetchMessenger函数，可根据实际业务逻辑调整
async function fetchMessenger() {
  return Promise.resolve({});
}

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

  // 修正toggle函数，使用已定义的setClicked实现切换
  function toggle() {
    setClicked((prev) => !prev);
  }

  return (
    <>
      <button
        onClick={toggle}
        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!'}
    </> {/* 补全JSX闭合标签 */}
  );
}

3. 调整测试用例逻辑 #

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


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

  it('switches text when button is clicked', async () => {
    render(() => <Messenger />);
    const button = await screen.findByRole('button');
    
    fireEvent.click(button);
    expect(await screen.findByText('Test this!')).toBeInTheDocument();
    
    fireEvent.click(button);
    expect(await screen.findByText('Click me!')).toBeInTheDocument();
  });
})

额外排查建议 #

• 确认依赖版本兼容：SolidJS 1.4.8需搭配适配的solid-testing-library和vitest版本，建议使用官方推荐的版本组合
• 清理缓存：执行pnpm cache clean后重新安装依赖，避免缓存导致的版本冲突

内容的提问来源于stack exchange，提问作者gks