Some reablocks components don't work with vitest testing library (Checkbox)

[tigran1100]

I'm submitting a...

[x ] Bug report  

Current behavior

When testing reablocks with vitest, some of the components are working fine, some not.
For example: InlineInput

InlineInput.test.tsx`
describe('Test', () => {
it('Should render', () => {
render();
});
});

The error I'm getting`
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Other components that are throwing error`
Checkbox, Select and probably more

This is how I use Checkbox component`
const TestComponent = () => {
const [checked, setChecked] = useState(false);
return (
<Checkbox
checked={checked}
label="Check me"
onChange={() => setChecked(!checked)}
/>
);
};

describe('Test', () => {
it('Should render', async () => {
render();
});
});

Expected behavior

I expect component to not throw error, when testing with vitest

Minimal reproduction of the problem with instructions

The described components above are giving error, when I try to render them, but some other components from reablocks work just fine, for example  Button, Calendar, Card, DateFormat, Menu and more

What is the motivation / use case for changing the behavior?

Environment

Libs:
  "dependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.1",
    "@testing-library/user-event": "^14.5.2",
    "reablocks": "^5.8.0",
    "react": "^18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.10",
    "react-fast-compare": "^3.2.2",
    "react-helmet-async": "^1.3.0",
    "react-hook-form": "^7.45.2",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.21.2",
    "react-tabs": "^6.0.2",
    "react-test-renderer": "^18.2.0",
    "react-use": "^17.4.0",
    "react-window": "^1.8.10",
    "react-xarrows": "^2.0.2",
    "reakeys": "^1.3.1",
    "reaviz": "^14.15.2",
    "rison": "^0.1.1",
    "use-query-params": "^2.2.1",
    "yup": "^1.2.0"
  },


Browser:
- [x ] Chrome (desktop) version 123.0.6312.122
 
For Tooling issues:
- Node version: 20.11.1
- Platform: Windows

[amcdnl]

@tigran1100 - Could you make a sample repo? That will help us test it much easier.

[tigran1100]

141-vitest-error.zip

[tigran1100]

Couldn't push the branch, 403

There are 3 tests (Checkbox.test, ConditionInput.test, SearchInput.test), where only searchInput is working
npm run test

[amcdnl]

Just a new repo would work

[tigran1100]

https://github.com/tigran1100/reablocks

[tigran1100]

Just want to inform that the problem still exists for 'InlineInput' and 'Select' components on the latest "7.3.6" version, but it fixed the problem for "Checkbox" component

Thanks

-- ConditionInput:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ForwardRef.
at file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:10236:5
at ThemeProvider (file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:2418:26)

-- Select:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ForwardRef.
at file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:10236:5
at SelectInput (file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:11074:3)
at CloneElement (file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:16056:3)
at file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:255:5
at file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:517:5
at Select (file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:11786:7)
at ThemeProvider (file:///C:/Users/vm_user/Desktop/ui/node_modules/reablocks/dist/index.js:2418:26)

[devconn99]

The problem for "InlineInput" is coming from "react-18-input-autosize" library.
For example when I'm changing

AutosizeInput to 'input' in this part of code

"node_modules/reablocks/dist/index.js"

const InlineInput = forwardRef(
({
inputClassName,
placeholderIsMinWidth = true,
theme: customTheme,
...rest
}, ref) => {
const theme2 = useComponentTheme("input", customTheme);
return jsx(
AutosizeInput,
{
inputRef: ref,
inputClassName: twMerge(theme2.inline, inputClassName),
placeholderIsMinWidth,
...rest
}
);
}
);

The test is passing, but the input is becoming non-resizable.
Also it's fixing the problem with Select component. Idk how they are related, but it's being fixed too

[amcdnl]

@devconn99 - retry now - we redid that component.

[devconn99]

Okay, I will try.
Thank you @amcdnl

[amcdnl]

@tigran1100 - can you retest and let us know if its stil an issue?

[amcdnl]

this should be solved now, if its not please reopen. It was the peasky inline input but we redid it.