These are chat archives for airbnb/enzyme

9th
Mar 2016
Charles F. Munat
@chasm
Mar 09 2016 01:38
Greetings. I have an App that contains a Board that contains 9 Squares. I want to render the App somehow, then click on individual squares and check that the App state is updated properly. Kind of an integrated test. But I can't for the life of me figure out how to do this with enzyme. Is it even possible? I can test individual components by themselves, but trying to test the entire stack? Is there a way?
Leland Richardson
@lelandrichardson
Mar 09 2016 02:11
@chasm to test everything, down to the leaf nodes, you can use mount
you need to make sure your test environment has a document available
Charles F. Munat
@chasm
Mar 09 2016 02:11
@lelandrichardson I've tried that, but how do I grab a Square and click on it? Got a link?
I have jsdom installed and globals set up.
Leland Richardson
@lelandrichardson
Mar 09 2016 02:12
you can do something like wrapper.find(Square).at(n).simulate(‘click’)
Charles F. Munat
@chasm
Mar 09 2016 02:12
Glad to hear that I'm on the right track. Ah! the at(n) really helps! I'll try it. Thanks.
Leland Richardson
@lelandrichardson
Mar 09 2016 02:13
:thumbsup:
Charles F. Munat
@chasm
Mar 09 2016 02:22
No joy.
I'm doing const wrapper = mount(<App/>) is that right?
Then I do wrapper.find(Square) but I just get the App back again. Weird.
The .at(n) with ANY integer returns the app as well.
Screen Shot 2016-03-09 at 3.17.49 PM.png
I get the following error:
    } else if (domComponentOrNode.tagName) {
                                 ^
TypeError: Cannot read property 'tagName' of null
Charles F. Munat
@chasm
Mar 09 2016 02:30
That happens with this:
const wrapper = mount(<App/>)
wrapper.find(Square).at(0).simulate('click')
Leland Richardson
@lelandrichardson
Mar 09 2016 02:44
hmm
not sure
can you post some code?
wrapper.find(Square) should definitely not return app
Charles F. Munat
@chasm
Mar 09 2016 03:09
Ah! It occurs to me -- I am only extending Component for the App -- Board and Square are pure functions. Will that make a difference?
Leland Richardson
@lelandrichardson
Mar 09 2016 16:42
@chasm hmm. it shouldn't
Eric Fields
@ericdfields
Mar 09 2016 17:26
anyone here familiar w/ this bug? airbnb/enzyme#47 … i'm simply looking for the best path to get import sinon from 'sinon' working in my test
Leland Richardson
@lelandrichardson
Mar 09 2016 17:27
i think the issue is that sinon isn’t browserifiable (or webpackable)
Eric Fields
@ericdfields
Mar 09 2016 17:28
ah right
Leland Richardson
@lelandrichardson
Mar 09 2016 17:28
i thnk sinon 2.0 is supposed to fix this, but not sure when that’s going to come out
there are some alternatives though i think
Eric Fields
@ericdfields
Mar 09 2016 17:31
yeah that looks like it might get the job done
Eric Fields
@ericdfields
Mar 09 2016 19:39
expect(), to(), have() and such… are those brought in by the airbnb preset?
Leland Richardson
@lelandrichardson
Mar 09 2016 19:39
those are all specific to chai
and not required to use enzyme
Eric Fields
@ericdfields
Mar 09 2016 19:39
use chai instead of jasmine then?
Leland Richardson
@lelandrichardson
Mar 09 2016 19:39
you can also use other APIs of chai, such as assert
only if you want to
jasmine has their own expect API and it will work just fine
there is a chai-enzyme project though that has some really nice assertion helpers with enzyme
the test failures are displayed in really helpful ways as well
Eric Fields
@ericdfields
Mar 09 2016 19:40
testing in js is new to me, so i'm not beholden to jasmine
Leland Richardson
@lelandrichardson
Mar 09 2016 19:42
chai enzyme is good to check out. a lot of this stuff is just kind of whatever you prefer though
some people really like the assert syntax, as opposed to the “BDD style” “expect” syntax
Eric Fields
@ericdfields
Mar 09 2016 19:45
coming from rspec, they're all pretty similar looking at first blush
Leland Richardson
@lelandrichardson
Mar 09 2016 19:45
yeah
chai’s expect syntax will be the closest to rspec i believe
Jordan Harband
@ljharb
Mar 09 2016 19:48
remember tho that in mocha "before" is "beforeAll", whereas in rspec i think it defaults to before :each
Eric Fields
@ericdfields
Mar 09 2016 19:49
in terms of their place in the world, jasmine/chai/mocha are all variants of the same thing?
bdd vs. tdd, etc, aside
Leland Richardson
@lelandrichardson
Mar 09 2016 19:49
sort of
some are larger scoped
jasmine has a plugin system that can allow your tests to run in several different environments, handle compilation, etc
jasmine also has assertions built in, whereas mocha does not (you need to use chai in this case)
and chai is only assertions
so it’s more like jasmine ~= mocha + chai
Eric Fields
@ericdfields
Mar 09 2016 19:55
gotcha
Charles F. Munat
@chasm
Mar 09 2016 21:04
@lelandrichardson : Thanks! Here is the code: https://github.com/dev-academy-challenges/streamer . The tree is App -> Board -> Squares (9) (it's a tic-tac-toe board). I want to grab squares and click on them, then check that the board re-renders correctly. If you look at the test/tests.js file, you'll see that I'm using const wrapper = mount(<App/>) and then trying to find the Squares (or the Board) with wrapper.find(Square), and I get back an empty nodes array (you can run the tests with npm test as expected).
No matter what I try, I can't seem to find the Board or Square with any of the three wrapper types. I just want to simulate clicks on squares. Weirdly, if I call wrapper.html() I do get the correct HTML for app, board, and squares. Huh.
Jordan Harband
@ljharb
Mar 09 2016 21:07
@chasm: can you make a repro case in a multifile gist, or a repo?
Charles F. Munat
@chasm
Mar 09 2016 21:08
Haven't done that before, but will try to figure it out. It's a skill I need to develop, I guess.
If you clone this repo, install the deps, and run the test, you should see it, but that's asking a lot, I guess. I'll try to figure out an easier way.
Jordan Harband
@ljharb
Mar 09 2016 21:10
often you'll find that trying to make a reduced test case will turn up the bug :-)
Charles F. Munat
@chasm
Mar 09 2016 21:11
I bet.
Charles F. Munat
@chasm
Mar 09 2016 21:52
@ljharb : Is this what you're looking for? https://gist.github.com/chasm/b6e7979b42ea012cd601 . It's as simple as I can make it, and I still get the same results. Can you spot my error?
Charles F. Munat
@chasm
Mar 09 2016 22:01
Ah! I switched out the pure functions for Square and Board with extended React Components and it works fine. So, in fact, this will not work if you do not extend the React Component (as I suspected yesterday). Oh, well.
Leland Richardson
@lelandrichardson
Mar 09 2016 22:02
@chasm it should we definitely do support stateless functional components
how were you trying to select them?
Charles F. Munat
@chasm
Mar 09 2016 22:33
@lelandrichardson -- exactly as in this multifile gist: https://gist.github.com/chasm/b6e7979b42ea012cd601
That's my code with everything extraneous removed and all in one file.
As soon as I replace the functions with classes, it works.
This message was deleted
Leland Richardson
@lelandrichardson
Mar 09 2016 22:35
the click simulation is going to be difficult unless you name your click handler props something like onClick
Charles F. Munat
@chasm
Mar 09 2016 22:35
Actually, it's working fine now like this:
const wrapper = mount(<App/>)
wrapper.find(Square).at(4).simulate('click')
wrapper.find(Square).at(3).simulate('click')
wrapper.find(Square).at(0).simulate('click')
When I check App state I get { moves: [4, 3, 0] }
But only after changing the const Board = ({}) => { ... } to class Board extends Component { ... }
Perhaps with functions I can't search for Square?
It makes sense to me that it won't work with pure functions as I don't have any objects to search for. It's just an App object with a render function that wraps a function that wraps a function...
But maybe not as a class is just a function you call with the new operator, right? Hmm.
Charles F. Munat
@chasm
Mar 09 2016 22:42
Ah. So change clickCb to onClick? Or handleClick? Will try that.
Leland Richardson
@lelandrichardson
Mar 09 2016 22:43
yah, onClick
Jeff Langston
@jlangston
Mar 09 2016 22:43
Greetings, First off kudos on enzyme. The api looks like a breath of fresh air compared to some of the react testing libs.
Leland Richardson
@lelandrichardson
Mar 09 2016 22:47
@jlangston thanks!
Charles F. Munat
@chasm
Mar 09 2016 22:48
Can't change it to onClick because that has to be the prop name when I create the board in App, and it will set a click handler on the App instead of passing it down as a prop -- not what I need. I need to capture clicks on Squares. Tried it with handleClick instead, but no joy.
Jeff Langston
@jlangston
Mar 09 2016 22:50
Wondering if someone might have any ideas to help me out with a configuration issue I am experiencing. Trying to get enzyme running with karma, browserify and jasmine. Simply Importing shallow from the enzyme module is throwing an error Uncaught TypeError: Cannot read property '_' of undefined.
Leland Richardson
@lelandrichardson
Mar 09 2016 22:53
any stacktrace with that?
Jeff Langston
@jlangston
Mar 09 2016 22:55
Karma is just logging the error Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR Uncaught TypeError: Cannot read property '_' of undefined at /var/folders/zn/tcdm6cpn7_sbxzz48f7v_k0w0000gn/T/e298ba66eb9ba6e791835e153a7a77d7.browserify:45671 <- node_modules/underscore/underscore.js:6:12
Leland Richardson
@lelandrichardson
Mar 09 2016 23:22
maybe you want to make sure karma is bundling underscore for you?
seems like underscore is undefined for some reason
Jeff Langston
@jlangston
Mar 09 2016 23:32
That is along the same thoughts I had but It seems like specifying underscore to be loaded into the browser doesn't have any effect. Which might mean I am just doing it incorrectly.