this article seems to say it's an issue between enzyme and useContext
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
simple test:
describe('Select component', () => {
const wrapper = mount(<Select {...requiredProps} />);
const selectRoot = findByTestAttr(wrapper, 'selectRoot');
selectRoot.simulate('click');
it('should open dropdown', () => {});
});if replace mount to shallow - it works.
but I have case when need to test component using mount...
can somebody help me pls?
packages versions:"jest": "^25.1.0",
"babel-jest": "^25.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
simulate, it doesn't faithfully simulate anything)
<div
data-test="selectRoot"
ref={rootElement}
className={css(styles.regular.root)}
onClick={toggleDropdown}
>...</div>I removed everything but error still occurs.
describe('Select component', () => {
const wrapper = mount(<Select {...requiredProps} />);
it('should open dropdown', () => {});
});console.log(Select) before mount/shallow, what do you see
console.log src/features/FormComponents/components/Select/Select.test.js:14
{ [Function: Select]
propTypes:
{ name: [Function: bound checkType],
value:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
items: [Function: bound checkType],
onChange: [Function: bound checkType],
disabled:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
error:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
required:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
template:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
label:
{ [Function: bound checkType] isRequired: [Function: bound checkType] },
placeholder:
{ [Function: bound checkType] isRequired: [Function: bound checkType] } } }
<div data-test="selectClosedDropDown" className={css(styles.value(error, template).base)}>
{value ? value : <span className={css(styles.regular.placeholder)}>{placeholder}</span>}
<ArrowDown
width={24}
height={24}
fill={colorBlack}
className={css(styles.regular.arrowDown)}
/>
</div>
const userElements = config.SECURITY !== 0 && (
<Dropdown
overlay={userMenuOptions}
placement="bottomRight"
trigger={['click']}
>
<div className="configUser">
{avatar}
<span className="configUser__user">
{window.innerWidth > config.BREAKPOINTS.MD &&
(isEmpty(userData)
? 'Userinfo'
: userData.name + ' ' + userData.surname)}
</span>
<Icon type="down" />
</div>
</Dropdown>
);
Hi!
I can't get the onBlur event to be triggered:
wrapper
.find('Input')
.findWhere(input => input.props().accessibilityLabel === 'mobilnummer')
.first()
.props()
.onBlur();The test fails with the following error on the last line: TypeError: Cannot read property 'length' of undefined. Any ideas? It's working fine with an onChangeText event I trigger just before this, on the same element.
Hello! Can someone tell me, does enzyme support global wrappingComponent
Something like this.
import Enzyme from 'enzyme';
import React, { StrictMode } from 'react'
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter(),
wrappingComponent: ({ children }) => <StrictMode>{children}</StrictMode>
});When I use this I get a stack overflow error
RangeError: Maximum call stack size exceeded
at createElement (node_modules/react/cjs/react.development.js:753:23)
at createElement (node_modules/react/cjs/react.development.js:1733:31)
at wrapWithWrappingComponent (node_modules/enzyme-adapter-utils/src/Utils.js:347:5)
at ReactSixteenAdapter.wrapWithWrappingComponent (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:903:13)
at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:353:53)
at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)
at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:355:29)
at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)So, does enzyme support this?
Hi, I am trying to get the <options> from the <select> , code isproperties.map((item) => <option key={item} value={item}> {item} </option>)
I am using the shallow render and test case code for option isit('should have the correct number of option tags', function(){
expect(comp.find('option').length).toBeGreaterThan(0);
})
test case is passed but it is not passing through option tags inproperties.map((item) => <option key={item} value={item}> {item} </option>)
please, can some one help me with this
Hey everyone. I know that this topic has been covered many times, but nothing has worked for me. I am trying to create function that will shallow render my component with its store (Redux store). I am using this snippet:
export function shallowWithStore(component, store) {
function ProviderWrapper({ children }) {
return (
<Provider store={store}>
{children}
</Provider>
);
}
return shallow(component, {
wrappingComponent: ProviderWrapper,
});
}Later in the test I will use:
const component = shallowWithStore(<ReplyEditContainer />, createMockStore(store));And it seems it doesn't work. I always get the same error, even if I don't use wrappingComponent option at all.
Error: Could not find "store" in the context of "Connect(ReplyEditContainer)". Either wrap the root component in a <Provider>, or pass ...Is there anything missing in my code, because the API seems to fit perfectly for my usecase