These are chat archives for airbnb/enzyme

9th
Feb 2016
Ian VanSchooten
@IanVS
Feb 09 2016 16:39
I'm using enzyme for testing React Native, and the lack of className selectors is becoming very painful. For instance, if I have a component which renders three levels of nested Views, asserting against the deepest View is difficult. Does anyone have any suggestions of how to do this in a somewhat non-brittle way, other than relying on findWhere, which does work but is pretty clunky and inexact?
Also, @lelandrichardson, I just found your react-native-mock library and can't wait to try it out. I was basically manually doing the same thing, but in a much less complete and robust way.
Leland Richardson
@lelandrichardson
Feb 09 2016 17:05
@IanVS i’ve run into this problem as well, and I haven’t really figured out or decided what the best way forward is
there are a couple of options
  1. use refs (though this may have performance and memory overhead)
  1. use className and id props anyway (meh)
  1. something I haven’t figured out yet
if you have any ideas let me know. We can build something into enzyme if the use case is pervasive enough
and glad to hear the mock library sounds useful. this is precisely why i built it… having everyone under the sun just make their own mock was not a scalable solution
this way at least it might be centralized
Ian VanSchooten
@IanVS
Feb 09 2016 17:15

Yeah, I'm leaning towards using id and className, but I'm afraid it will be confusing to others jumping into our codebase.

Wait, I thought RN doesn't use CSS?!

Another (also ugly) option might be to use some kind of custom prop like selector, and then .find({selector: 'foo'})
Leland Richardson
@lelandrichardson
Feb 09 2016 17:41
yah
we were just discussing something obvious like data-test-id
Ian VanSchooten
@IanVS
Feb 09 2016 17:46
It just also sucks to have to include code only for the tests, but maybe it's the best way.
Leland Richardson
@lelandrichardson
Feb 09 2016 17:52
yah i 100% agree
Ian VanSchooten
@IanVS
Feb 09 2016 17:52
But, if you (or the community) decided on something (like data-test-id), you could add it to the enzymeSelector list.
Leland Richardson
@lelandrichardson
Feb 09 2016 17:52
feels wrong
right
you could also build a babel plugin to transpile it out or something
Ian VanSchooten
@IanVS
Feb 09 2016 17:53
And there's no real concept of unique identifiers in RN like we got for free when using CSS + React, so I see no way around adding something for the tests.
Leland Richardson
@lelandrichardson
Feb 09 2016 17:53
though dont really think it matters much
though it might cut down on some serialization
right.
if you were in a React-web project that was 100% inline styles, you’d conceivably have the same issue
Ian VanSchooten
@IanVS
Feb 09 2016 17:54
That's true.
Joseph McElroy
@joemcelroy
Feb 09 2016 17:59
in prod we use a data-qa attribute for our elements
we try not to use css selectors as markup may change
having these test attribute means we can change our markup but not break our functional and component tests
Ian VanSchooten
@IanVS
Feb 09 2016 18:00
Are you using React or React Native?
Joseph McElroy
@joemcelroy
Feb 09 2016 18:00
React
but we do it across all our projects
angular / react etc
Ian VanSchooten
@IanVS
Feb 09 2016 18:01
So then your enzyme tests look like wrapper.find({'data-qa': 'foo'})?
... for example
Joseph McElroy
@joemcelroy
Feb 09 2016 18:02
yeh we use propertySelector
this is for manpulation
for asserting rendering, we use jsxToHTML
but its not so bad to have props for testing
Ian VanSchooten
@IanVS
Feb 09 2016 18:35
Great, thanks for sharing your experience.