Ad
How To Find A React Component Inside An Element With Specific Class Using Enzyme?
I am trying to test a React component using Jest and Enzyme. I want to simulate a click event on a Button component which is inside a div with a specific class name. I can't retrieve the Button node.
I have the following markup in my component
<div className="settings">
<Button
onClick={() => this.toggleSettingsModal(true)}
buttonStyle={ButtonStyle.Primary}>
Settings
</Button>
</div>
I have tried
const component = shallow(<MyComponent />);
component.find(".settings[Button]").simulate("click");
I expect to find the Button component, but I get 0
nodes.
Ad
Answer
Try the code below
import { shallow } from 'enzyme'
import MyComponent from './MyComponent'
describe('<MyComponent />', () => {
it('simulates click events', () => {
const component = shallow(<MyComponent />);
component.find(Button).simulate("click");
});
});
EDIT Try the code below:
expect(component
.find(Button)
.closest('.settings'))
.simulate("click");
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad