mount
with MobX observer component. ✖ should render properly
HeadlessChrome 83.0.4103 (Mac OS X 10.15.6)
Error: Enzyme Internal Error: unknown node with tag 15
describe("<SomeComponent />", function () {
it("should render properly", function () {
const component = mount(
<StoreProvider>
<SomeComponent />
</StoreProvider>
);
});
});
observer(SomeComponent)
let instance = null;
beforeEach(() => {
instance = shallow(<NotificationView {...props}/>);
});
it('should render the notification component', () => {
expect(instance.exists()).toEqual(true);
});
it('should find the elements of the notification component', () => {
const notification = instance.find(Notification);
const notificationActionBar = instance.find(NotificationActionBar);
expect(notification.exists()).toBe(true);
expect(notificationActionBar.exists()).toBe(true);
});
console.log
ging them and confirm
Hi, I am new to enzyme.
I am trying to test my functional component, but shallow returns me always null. Any idea where I should look at?
const wrapper = shallow(<MyComponent />);
I do have set adapter in setupTest.js (app created with create-react-app)
import '@testing-library/jest-dom/extend-expect';
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
I have tried to shallow on direct html element and this works fine.
const wrapper = shallow(<div >test</div>);
For check I use
console.log(wrapper.first().html())
this.setState
class MyComp extends React.Component {
state = { value: '' }
handleChange = (e) => {
this.setState({ value: e.target.value }, () => {
// do sommething else
});
}
render() {
return (
<input onChange={ this.handleChange } />
)
}
}
const wrapper = shallow(<MyComp />);
wrapper.find('input').simulate('change', {
target: {
value: 1,
name: 0
}
});
expect(wrapper.state().value).toEqual('1'); // this gives error as it is receiving state.value as ''
setState
is not working?
this.setState
shouldn't be given an object, it should be given a callback
handleChange =
, instead of a proper bound prototype method, that means you also can't mock it out
mount
to load a component into the DOM. One of its children is a Blueprint3.Select component whose value I want to change.shallow
, I cannot use simulate
on the react component to change its value which is wrapped in a <div>
.<div>
of this component? simulate
on React component when using mount
?.invoke
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
Hey there. I'm facing an interesting problem that I can't figure out:
I got a form which I'm testing, so I get the submit button like this: button = wrapper.find('#notification-channel-add-button')
I then try so simulate a change event: input.simulate('change', { target: { value: 'Sample text' } })
Then, depending on how I test the disabled state of the button, I get different results:
// Correctly passes
expect(button.getDOMNode().hasAttribute('disabled')).toBeFalsy();
// This fails
expect(button.props().disabled).toBeFalsy();
Has anyone ever faced this problem?