These are chat archives for airbnb/enzyme

24th
Jan 2016
Ben Stokoe
@benstokoe
Jan 24 2016 16:13
Hi guys, I am trying to get simulate to work with keyup but I can't. I can get it to call the function but can't get any keys into it. Does anybody have an example of it working? Thanks
Jordan Harband
@ljharb
Jan 24 2016 16:15
@benstokoe which version of enzyme? only the latest supports the lowercase ones - react's capitalization is keyUp
Ben Stokoe
@benstokoe
Jan 24 2016 16:16
I’m using 1.3.1
Should I upgrade to 4 then?
1.4?
Jordan Harband
@ljharb
Jan 24 2016 16:17
yep!
also just changing to .simulate('keyUp') would work in the meantime
Ben Stokoe
@benstokoe
Jan 24 2016 16:17
Cheers, I’ll try that :smile:
Hmm still not getting anything. I think maybe the problem is what I’m sending in or what I’m trying to simulate
Jordan Harband
@ljharb
Jan 24 2016 16:20
can you share a gist of your test?
Ben Stokoe
@benstokoe
Jan 24 2016 16:20
Yup, one second. Thanks
Jordan Harband
@ljharb
Jan 24 2016 16:27
hm
can you try making more intermediate variables?
like, put the .find in a var, assert that it has a length of 1, and then do the simulate?
Ben Stokoe
@benstokoe
Jan 24 2016 16:30
Hmm still nothing :worried:
I’m assuming I have to use full DOM rather than shallow?
Jordan Harband
@ljharb
Jan 24 2016 16:33
if you want to test Input, yeah
you could also shallow test Settings and just assert that the function is passed as the onKeyUp prop to Input
Ben Stokoe
@benstokoe
Jan 24 2016 16:34
Yeah I think I’m going about this the wrong way maybe
Jordan Harband
@ljharb
Jan 24 2016 16:34
and then shallow test Input and assert that if you pass an onKeyUp, it ends up on the input
and then mount test Input and do the simulate
Ben Stokoe
@benstokoe
Jan 24 2016 16:35
I am asserting that Input takes props and then an onKeyUp. And now trying to assert in Settings that the thing is passed down and then called with the right things. Which is the opposite of what you suggest haha
Jordan Harband
@ljharb
Jan 24 2016 16:36
:-p
the whole benefit imo of shallow rendering is that parent components can delegate test responsibility to child components
Ben Stokoe
@benstokoe
Jan 24 2016 16:38
Yeah I’m really liking it at the moment haha. Just started using shallow rendering so getting used to these kinds of tests haha
Yes, your version of testing is better thinking about it hah :smile:
But the reason I did it the way I did was so that I could assert that the things being passed down are correct also. Which are the action names and value
Jordan Harband
@ljharb
Jan 24 2016 16:41
shallow rendering tests that too
there's nothing wrong with doing a full integration test on Settings, fwiw
it's just that as long as Settings will always contain an Input, you aren't gaining much by doing that
it's only if you refactored Settings to not have an Input, that you'd want the full Settings tests available.
Ben Stokoe
@benstokoe
Jan 24 2016 16:50
I suppose, but if someone comes and changes the action name then you won’t catch that?
Jordan Harband
@ljharb
Jan 24 2016 16:57
changes it where
inside Input?
Ben Stokoe
@benstokoe
Jan 24 2016 16:57
No inside Settings
Jordan Harband
@ljharb
Jan 24 2016 16:57
ah - that's where propTypes come into play. every component (even stateless functional ones) should have propTypes
Ben Stokoe
@benstokoe
Jan 24 2016 16:57
Here
Jordan Harband
@ljharb
Jan 24 2016 16:57
and you can set your tests up to fail when propType warnings are issued
Ben Stokoe
@benstokoe
Jan 24 2016 17:00
Thanks for the help @ljharb
Some good points :smile:
Ben Stokoe
@benstokoe
Jan 24 2016 17:14
Trying it on input and still can’t get keydown simulate to work :worried:
This message was deleted
Jordan Harband
@ljharb
Jan 24 2016 17:17
on 1.4?
Ben Stokoe
@benstokoe
Jan 24 2016 17:17
yes
Jordan Harband
@ljharb
Jan 24 2016 17:17
hm
when you say "doesn't work" what do you mean
Ben Stokoe
@benstokoe
Jan 24 2016 17:18
Well it doesn’t seem to call anything :confounded:
Jordan Harband
@ljharb
Jan 24 2016 17:19
if you throw a console.log in a bunch of places, can you figure out what's not getting called?
Ben Stokoe
@benstokoe
Jan 24 2016 17:27
Hmm I am 1.4 but the propFromEvent is not working with lowercase events
Well not propFromEvent, hang on
I believe it’s because ShallowWrapper calls propFromEvent which doesn’t handle the lowercase format whereas ReactWrapper calls mapNativeEventNames which maps it
Jordan Harband
@ljharb
Jan 24 2016 17:43
aha
can you file that as an issue (or send a PR)?
that sounds like a bug
Ben Stokoe
@benstokoe
Jan 24 2016 17:43
Yup can do :smile:
Jordan Harband
@ljharb
Jan 24 2016 17:43
(more an accidental oversight but still)
thanks
Ben Stokoe
@benstokoe
Jan 24 2016 17:52
This message was deleted
Jordan Harband
@ljharb
Jan 24 2016 17:54
it's a peer dep
so you have to manually install it in npm 3
Ben Stokoe
@benstokoe
Jan 24 2016 17:55
haha yeah sorry, I realised you had a npm task for it too :clap:
Leland Richardson
@lelandrichardson
Jan 24 2016 17:56
what we ended up with seemed to be the best possible way to support both 0.13 and 0.14
which is easier said than done :/
it seemed like a reasonable assumption to make that people using enzyme would already be using react though...
Ben Stokoe
@benstokoe
Jan 24 2016 17:57
Haha yeah I just have it installed locally for projects so didn’t have it installed for enzyme
Leland Richardson
@lelandrichardson
Jan 24 2016 18:15
oh you mean for actually working on the enzyme repo itself?
yah, you can use npm run react:13 and npm run react:14 for that :)
Ben Stokoe
@benstokoe
Jan 24 2016 18:16
Yeah sorry :smile:
Leland Richardson
@lelandrichardson
Jan 24 2016 18:45
@benstokoe your change is published on 1.4.1 now btw!
Ben Stokoe
@benstokoe
Jan 24 2016 18:49
@lelandrichardson thanks guys!
keep up the good work!