Got an error: 'Cannot read properties of undefined (reading 'withConfig')' during the testing with RTL #37
Description
Hi!
I updated from 3.3.3 to 5.0.0 v of the react-functional-select.
After this, I got an error:
This error occurred when the component with Select loaded before tests started. And I have no idea what happened and how to solve it.
I use CRA, RTL, and Typescript.
Environment
Node: 16.17.0
npm: 8.15.0
npmPackages:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-functional-select": "^5.0.0",
"styled-components": "^5.3.5",
"typescript": "^4.7.4",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.2.1",
"jest-styled-components": "^7.0.8",
And using:
const CustomSelect = (props: SelectProps) => { // .... const getCaretIcon = ({ menuOpen }: IconState) => ( <StyledCaretIconSelect active={menuOpen}> <CaretIcon className="select-caret-icon" /> </StyledCaretIconSelect> ); const getCrossIcon = () => ( <> <CrosstIcon className="select-cross-icon" /> <StyledSelectIconsDevider className="select-devider" /> </> ); const handleOnChange = useCallback((option: OptionData) => onChange(option), []); const getOptionValue = useCallback( (option: OptionData): number | string => handleOptionValue(option), [], ); const getOptionLabel = useCallback( (option: OptionData): number | string => handleOptionLabel(option), [], ); return ( <Select initialValue={value} options={options} isInvalid={isInvalid} isSearchable={isSearchable} isClearable={isClearable} isDisabled={isDisabled} onOptionChange={handleOnChange} getOptionValue={getOptionValue} getOptionLabel={getOptionLabel} caretIcon={getCaretIcon} clearIcon={getCrossIcon} themeConfig={ThemeSelectFilter} required={required} placeholder={placeholder} hideSelectedOptions={false} menuItemSize={selectMenuItemSize} menuWidth={menuWidth} /> ); }; export default CustomSelect; and theme:
const ThemeSelectFilter: Partial<DefaultTheme> = { color: { border: 'transparent', danger: `${COLORS.warning}`, dangerLight: 'rgb(213 66 54 / 25%)', disabled: `${COLORS.background.disabled}`, placeholder: `${COLORS.text.light}`, iconSeparator: 'transparent', }, icon: { padding: 0, css: css` svg { fill: ${COLORS.text.light}; } .select-caret-icon { margin-bottom: 2px; width: 12px; height: 6px; } .select-cross-icon { margin-right: 10px; width: 10px; height: 10px; } `, }, control: { minHeight: '20px', borderWidth: '1px', boxShadow: '0 0 0 0.18rem', boxShadowColor: 'transparent', focusedBorderColor: 'transparent', padding: '0px 10px 0px 3px', css: css` font-weight: 600; cursor: pointer; `, }, menu: { padding: '8px', borderRadius: `${SIZES.border.radius}`, boxShadow: '0 2px 10px #00000029', option: { selectedColor: `${COLORS.text.main}`, selectedBgColor: 'transparent', padding: '5px 7px', focusedBgColor: 'transparent', }, }, noOptions: { fontSize: `${SIZES.typography.body1}`, margin: '0', color: `${COLORS.text.light}`, padding: '5px 7px', }, }; But, I also got this error even without theming.