reactjs - 我已经编写了这段代码，并且收到了一些错误。任何人都可以帮助我了解我在这段代码中缺少什么以便我进行测试吗？

Question

错误是：

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

import { screen, render } from "@testing-library/react";
import { BrowserRouter as Router } from "react-router-dom";
import "@testing-library/jest-dom";
import { Button } from "./Button";

describe("Button", () => {
  it("will call onClick when enabled", () => {
    const onClick = jest.fn();
    render(
      <Router>
        <Button onClick={onClick} disabled={false} />
      </Router>
    );
    userEvent.click(getByRole("button", /click me/i));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
  
  
  
  it("should activate a button", () => {
    render(
      <Router>
        <Button text="Add Project" type="Submit" size="md" variant="blue" />
      </Router>
    );
    const text = screen.getAllByText(/Add Project/i);
    const type = screen.queryByText(/Submit/i);
    const size = screen.queryAllByDisplayValue(/md/i);
    const variant = screen.queryByPlaceholderText(/blue/i);
    
    expect(text).toBeInTheDocument();
    expect(type).toBeInTheDocument();
    expect(size).toBeInTheDocument();
    expect(variant).toBeInTheDocument();
  });
});

按钮.js：

import React from 'react';
import PropTypes from 'prop-types';

export default function Button({
    text,
    type = 'button',
    size = 'md',
    variant = 'indigo',
    onClick,
    disabled,
}) {
    let sizing = {
        xs: { x: '2.5', y: '1.5', textSize: 'text-xs' },
        sm: { x: '3', y: '2', textSize: 'text-sm leading-4' },
        md: { x: '4', y: '2', textSize: 'text-sm ' },
        lg: { x: '4', y: '2', textSize: 'text-base' },
        xl: { x: '6', y: '3', textSize: 'text-base' },
    };
    return (
        <button
            disabled={disabled && disabled}
            type={type}
            onClick={() => {
                if (onClick) {
                    onClick();
                }
            }}
            className={`inline-flex items-center px-${sizing[size].x} py-${sizing[size].y} border border-transparent ${sizing[size].textSize} font-medium rounded shadow-sm text-white bg-${variant}-600 hover:bg-${variant}-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${variant}-500`}
        >
            {text}
        </button>
    );
}

Button.propTypes = {
    text: PropTypes.string,
    type: PropTypes.oneOf(['button', 'submit', 'reset']),
    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
    variant: PropTypes.oneOf([
        'gray',
        'red',
        'yellow',
        'green',
        'blue',
        'indigo',
        'purple',
        'pink',
    ]),
    onClick: PropTypes.func,
};

标签： reactjsdebugging

Answer 1

您正在Button默认导出，而不是按名称导出。所以改变

import { Button } from "./Button";

至

import Button from "./Button";