I am looking at the React Test Utilities docs, in particular at the renderIntoDocument function:
Render a component into a detached DOM node in the document.
I am wondering whether I should be doing anything with the component that I've rendered once I'm done testing?
This works:
const component = ReactTestUtils.renderIntoDocument(createElement(MyThing));
// do tests
unmountComponentAtNode(findDOMNode(component).parentElement);
but I'm wondering if this step is necessary, since it isn't mentioned in the docs. Does my current approach actually achieve anything useful, or can I just use renderIntoDocument without worrying about tidying up?
Related
Simply test case: Want to see if a given element is focused.
To check if an element is focused on a react web app with RTL and jest, you have two easy options available to you:
You can check if the element is the same as document.activeElement (may have to discard some wrappers)
You can extend your jest matchers with https://github.com/testing-library/jest-dom#tohavefocus and use expect(<element>).toHaveFocus()
I'm not sure what the equivalent check would be with react native (the RN equivalent to the jest-dom extension is https://github.com/testing-library/jest-native and is conspicuously missing the toHaveFocus matcher).
Sunk several hours in to this today. From what I can see, React Native Testing Library doesn't have this matcher and neither does the Jest Native matcher extender.
It looks like Detox supports it though.
There are lots of suggestions to use refs (which might let us call ref.current.isFocused()), or capture onFocus\onBlur events. But these aren't viable from the test environment perspective.
There were 2 things I observed with the refs.
The refs all get mocked out in jest (I don't know enough about jest to know why).
When the element is not focused, the ref is completely gone
Regarding, tracking onFocus\onBlur, it's unnecessary overhead and only further complicates the production code for the sake of testing. Then the component has to accept these as props and a mock has to be created for each one... no thanks!
I decided to open a feature request in the Jest Native project. Cross your fingers.
React.js users have it so easy!
I'm trying to test the output of Mithril.js components to programmatically verify that they look how they are intended to. What would be the best way to go about doing this? I'm working with the Jasmine testing framework.
I've been looking for a library that could take a Mithril component and easily verify that it has some element with so many of some other element as the children, and they have some set of properties. Essentially, I'm looking for something like Enzyme that works with Mithril. Of course, I want something as decoupled as possible from the implementation of the code.
I've looked into the library mithril-query, which verifies the existence of elements through CSS selectors, but I've had issues with it not working with compound selectors, and the syntax isn't visually intuitive. I would also just like to know if there are any other options available.
You could try mithril-node-render combined with your favorite HTML assertion tool.
What is the best way to test React's Components in Unit Tests?
The first problem is decorators (or HOCs). We don't want to test them, but without them it is really hard to mount deeply to test how it works as a components; but in order to make them work we have to mock all chain of Providers (which is ~3 components in our case, plus contexts, etc), and again, it is too fragile from my point of view.
Next question is about the logic inside components. I know, there are tons of articles with cool advice like "don't use logic inside your components", but we often need to maintain local state (like banners, etc). Should it be tested just with shallowMount, or it doesn't cost it too? Also lifecycle methods, if we start to check it, doesn't it make our tests too brittle and too much know about implementation?
And the last question is about the markup. Should we check anything inside the React Component? I read all sorts of tutorials, and I think that finding by tag is the worst example ever (I don't even want to go into details here). Jest snapshot feature for me doesn't seem a good choice too (I see absolutely the same problems here too). What I see could be helpful – just checking that different components are rendered when difference props are passed (like Loader and Offer, for instance, respectively), but sometimes they are children of some container itself, and shallowRendering doesn't work, which takes us back to the initial point.
To conclude, I see the point only in two things:
Testing logic for internal state (invoking methods and looking into new state)
Looking at rendering of components which render depending on props.
Second point can be really hard (because of deep nested children), so for now I am leaning towards rendering just a component (check that it didn't fail – in a shallow way), and checking logic by invoking methods and checking state after.
What are your strategies?
As far as I understand glimmer, embers new rendering engine, has a kind of virtual-dom implementation which is diffing for changes and updates the UI accordingly to those changes. To gain some speed in our tests I thought, it should be possible to use this this virtual dom to test a component without rendering it in the browser/phantomjs. In my normal integration tests I would do something like this:
it('shows a textarea', function(){
this.render(hbs`{{my-component}}`); // don't render here
const $textarea = this.$('textarea');
expect($textarea).to.have.length(1);
});
So my question is if there is a way to access this virtual dom in a unit/integration test.
Thanks
When writing tests for React components, you have to render them into the DOM in order to make assertions about their correctness. For example, if you want to test that a certain class is added to a node given a certain state, you have to render into a DOM node, then inspect that DOM node via the normal DOM API.
The thing is, considering React maintains a virtual DOM into which it renders, why can't we just assert on the virtual DOM once the component is rendered? That seems to me like a very good reason to have something like the virtual DOM.
Have I missed something?
You haven't really missed anything. We're working on making this better. The virtual parts have always been very much an implementation detail of React, not exposed in any useful or reliable way for testing. We have some methods in our test helpers which wrap up the internal lookups which sometimes avoids looking at the actual DOM but we need more.