error is:

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

Button.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,
};

CodePudding user response：

You are exporting Button as default, not by name. So change

import { Button } from "./Button";

to

import Button from "./Button";

CodePudding user response：

received value must be an HTMLElement or an SVGElement. Received has type: array Received has value: [Add Project]