testing-library
Feature Request: Easier access to component
Love using testing library, so thank you for giving me Angular testing library!! 🙏
One small problem with using it is that sometimes I need access to the rendered component (I know I shouldn't!) - due to things like configuring a spy to listen to an output event being emitted. In that case I need to use the result from the render - but it'd be much nicer (IMO) to be able to get to it from the screen object - because that's where I'm used to starting my code when writing a test! I'd suggest the fixture is the thing I would actually need - as that's what contains the componentInstance, among other things.
screen.fixture / screen.testFixture or even screen.componentInstance if other things can't be added, or anything similar to that would make writing my tests feel much nicer 😄
Thank you so much for this amazing library 🙇
Hi thanks for your kinds words.
Like you said, we're not a big fan of accessing the rendered component, but we do give you the option to do so.
That being said, it feels a bit wrong to add the instance to screen because there might be multiple instances.
...because there might be multiple instances.
I'm confused by that - do you mean if you run render more than once? In which case, how do the matchers work? Do they iterate on all of the rendered DOMs? And what happens with the fixture in a normal Angular unit test, in that case? There's only one componentInstance on the shared fixture - so I'm not sure why this would be different?
When you're testing a component that has one or more other child components, you will have multiple component instances visible on the "screen". This is also the case with when you use the fixture returned by the render function, but it doesn't bother me as much because you're rendering that component.
Thoughts?
This is also the case with when you use the fixture returned by the
renderfunction, but it doesn't bother me as much because you're rendering that component.
Yes it has child components, but I call render on one. That one is accessible via fixture.componentInstance. That's the one I'm interested in. There may be other use cases, where someone would be interested in child components - but I'm rendering one, that one is accessible - I'd just love it to be accessible more easily.
To be clear, the only problem with the way it works right now is:
- In a test where I don't care about the
componentInstance, I throw away the render result - In a test where I do, I need to store the render result
So when I go from one to the other, I need to switch focus from the code I'm currently writing back to the render line to change it. This is a bit 'flow'-breaking.
I do realise this is a very minor problem though! 👍