Styjun

Unbreakable Formation vs. Cry of the Carnarium

Can the Produce Flame cantrip be used to grapple, or as an unarmed strike, in the right circumstances?

Manga about a female worker who got dragged into another world together with this high school girl and she was just told she's not needed anymore

Are objects structures and/or vice versa?

Finding files for which a command fails

What is it called when one voice type sings a 'solo'?

Calculate Levenshtein distance between two strings in Python

When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?

How could a lack of term limits lead to a "dictatorship?"

How would photo IDs work for shapeshifters?

Why was the "bread communication" in the arena of Catching Fire left out in the movie?

LWC and complex parameters

Is there any use for defining additional entity types in a SOQL FROM clause?

Why do we use polarized capacitors?

Was there ever an axiom rendered a theorem?

What does 'script /dev/null' do?

How can I add custom success page

Is there a familial term for apples and pears?

Is ipsum/ipsa/ipse a third person pronoun, or can it serve other functions?

Why did the Germans forbid the possession of pet pigeons in Rostov-on-Don in 1941?

"listening to me about as much as you're listening to this pole here"

Why do UK politicians seemingly ignore opinion polls on Brexit?

extract characters between two commas?

A poker game description that does not feel gimmicky

How to call event target inside a function with enzyme - React

Loop inside React JSXUnable to access React instance (this) inside event handlerCan you force a React component to rerender without calling setState?Mocha, Enzyme: Unit testing custom functions in react component using enzymeReact Enzyme find second (or nth) nodeTest if function is called react and enzymeHow to call a component on a click event in react?React - Dont call method if event is fired from an element currently rendered by this componentCan too many event handlers impact the performance of a React-app?Error: expected mock function to have been called - onclick Jest enzyme

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

 componentWillUnmount() 
 document.removeEventListener('click', this.handleClickOutside);
 

 /**
 * Set the wrapper ref
 */
 setWrapperRef(node) 
 this.wrapperRef = node;
 

 handleClickOutside(event) 
 /* istanbul ignore next */
 if (this.wrapperRef && !this.wrapperRef.contains(event.target)) 
 this.props.clickHandler();
 
 

How do i call the handleClickOutside function. How should I mimic the clickOutside here? Please help

 it('lets click outside and close dropdown', () => 
 const handleClickOutside = sinon.spy();
 expect(handleClickOutside.called).to.be.true;
 wrapper.unmount();
 );

reactjs enzyme

share|improve this question

asked Mar 22 at 1:54

vinivini

1,6161857124

add a comment | 

0

 componentWillUnmount() 
 document.removeEventListener('click', this.handleClickOutside);
 

 /**
 * Set the wrapper ref
 */
 setWrapperRef(node) 
 this.wrapperRef = node;
 

 handleClickOutside(event) 
 /* istanbul ignore next */
 if (this.wrapperRef && !this.wrapperRef.contains(event.target)) 
 this.props.clickHandler();
 
 

How do i call the handleClickOutside function. How should I mimic the clickOutside here? Please help

 it('lets click outside and close dropdown', () => 
 const handleClickOutside = sinon.spy();
 expect(handleClickOutside.called).to.be.true;
 wrapper.unmount();
 );

reactjs enzyme

share|improve this question

asked Mar 22 at 1:54

vinivini

1,6161857124

add a comment | 

 componentWillUnmount() 
 document.removeEventListener('click', this.handleClickOutside);
 

 /**
 * Set the wrapper ref
 */
 setWrapperRef(node) 
 this.wrapperRef = node;
 

 handleClickOutside(event) 
 /* istanbul ignore next */
 if (this.wrapperRef && !this.wrapperRef.contains(event.target)) 
 this.props.clickHandler();
 
 

How do i call the handleClickOutside function. How should I mimic the clickOutside here? Please help

 it('lets click outside and close dropdown', () => 
 const handleClickOutside = sinon.spy();
 expect(handleClickOutside.called).to.be.true;
 wrapper.unmount();
 );

reactjs enzyme

share|improve this question

asked Mar 22 at 1:54

vinivini

1,6161857124

 componentWillUnmount() 
 document.removeEventListener('click', this.handleClickOutside);
 

 /**
 * Set the wrapper ref
 */
 setWrapperRef(node) 
 this.wrapperRef = node;
 

 handleClickOutside(event) 
 /* istanbul ignore next */
 if (this.wrapperRef && !this.wrapperRef.contains(event.target)) 
 this.props.clickHandler();
 
 

 it('lets click outside and close dropdown', () => 
 const handleClickOutside = sinon.spy();
 expect(handleClickOutside.called).to.be.true;
 wrapper.unmount();
 );

share|improve this question

asked Mar 22 at 1:54

vinivini

1,6161857124

share|improve this question

asked Mar 22 at 1:54

vinivini

1,6161857124

asked Mar 22 at 1:54

vinivini

1,6161857124

asked Mar 22 at 1:54

vinivini

1,6161857124

1 Answer
1

active

oldest

votes

1

Assuming this is a HOC or render prop that renders other components as children (this.props.children) -- also the following is a Jest and Enzyme test, so it may be slightly different than what you're using.

components/__test__/ClickHandler.test.js

const clickHandler = jest.fn()

const initialProps = 
 clickHandler,
 children: <button className="example">Test</button>
 ...other props
;

const wrapper = shallow(<ClickHandler ...initialProps />);

describe("Example", () => 
 it('handles clicks inside of the component', () => // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
 const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

 wrapper.instance().forceUpdate();
 wrapper.find('button').simulate('click');

 expect(spy).toHaveBeenCalled();
 expect(clickHandler).toHaveBeenCalledTimes(0);
 spy.mockClear();
 );

 it('handles clicks outside of the component', () => // this is a more straight forward test that assumes the event listener is already working
 const event = target: <div className="example">Outside Div</div> ;
 wrapper.instance().handleClickOutside(event);

 expect(clickHandler).toHaveBeenCalled();
 );

)

share|improve this answer

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291784%2fhow-to-call-event-target-inside-a-function-with-enzyme-react%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Assuming this is a HOC or render prop that renders other components as children (this.props.children) -- also the following is a Jest and Enzyme test, so it may be slightly different than what you're using.

components/__test__/ClickHandler.test.js

const clickHandler = jest.fn()

const initialProps = 
 clickHandler,
 children: <button className="example">Test</button>
 ...other props
;

const wrapper = shallow(<ClickHandler ...initialProps />);

describe("Example", () => 
 it('handles clicks inside of the component', () => // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
 const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

 wrapper.instance().forceUpdate();
 wrapper.find('button').simulate('click');

 expect(spy).toHaveBeenCalled();
 expect(clickHandler).toHaveBeenCalledTimes(0);
 spy.mockClear();
 );

 it('handles clicks outside of the component', () => // this is a more straight forward test that assumes the event listener is already working
 const event = target: <div className="example">Outside Div</div> ;
 wrapper.instance().handleClickOutside(event);

 expect(clickHandler).toHaveBeenCalled();
 );

)

share|improve this answer

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

add a comment | 

1

Assuming this is a HOC or render prop that renders other components as children (this.props.children) -- also the following is a Jest and Enzyme test, so it may be slightly different than what you're using.

components/__test__/ClickHandler.test.js

const clickHandler = jest.fn()

const initialProps = 
 clickHandler,
 children: <button className="example">Test</button>
 ...other props
;

const wrapper = shallow(<ClickHandler ...initialProps />);

describe("Example", () => 
 it('handles clicks inside of the component', () => // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
 const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

 wrapper.instance().forceUpdate();
 wrapper.find('button').simulate('click');

 expect(spy).toHaveBeenCalled();
 expect(clickHandler).toHaveBeenCalledTimes(0);
 spy.mockClear();
 );

 it('handles clicks outside of the component', () => // this is a more straight forward test that assumes the event listener is already working
 const event = target: <div className="example">Outside Div</div> ;
 wrapper.instance().handleClickOutside(event);

 expect(clickHandler).toHaveBeenCalled();
 );

)

share|improve this answer

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

add a comment | 

Assuming this is a HOC or render prop that renders other components as children (this.props.children) -- also the following is a Jest and Enzyme test, so it may be slightly different than what you're using.

components/__test__/ClickHandler.test.js

const clickHandler = jest.fn()

const initialProps = 
 clickHandler,
 children: <button className="example">Test</button>
 ...other props
;

const wrapper = shallow(<ClickHandler ...initialProps />);

describe("Example", () => 
 it('handles clicks inside of the component', () => // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
 const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

 wrapper.instance().forceUpdate();
 wrapper.find('button').simulate('click');

 expect(spy).toHaveBeenCalled();
 expect(clickHandler).toHaveBeenCalledTimes(0);
 spy.mockClear();
 );

 it('handles clicks outside of the component', () => // this is a more straight forward test that assumes the event listener is already working
 const event = target: <div className="example">Outside Div</div> ;
 wrapper.instance().handleClickOutside(event);

 expect(clickHandler).toHaveBeenCalled();
 );

)

share|improve this answer

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

const clickHandler = jest.fn()

const initialProps = 
 clickHandler,
 children: <button className="example">Test</button>
 ...other props
;

const wrapper = shallow(<ClickHandler ...initialProps />);

describe("Example", () => 
 it('handles clicks inside of the component', () => // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
 const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

 wrapper.instance().forceUpdate();
 wrapper.find('button').simulate('click');

 expect(spy).toHaveBeenCalled();
 expect(clickHandler).toHaveBeenCalledTimes(0);
 spy.mockClear();
 );

 it('handles clicks outside of the component', () => // this is a more straight forward test that assumes the event listener is already working
 const event = target: <div className="example">Outside Div</div> ;
 wrapper.instance().handleClickOutside(event);

 expect(clickHandler).toHaveBeenCalled();
 );

)

share|improve this answer

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714

answered Mar 22 at 2:27

Matt CarlottaMatt Carlotta

3,8061714