3 ms·
> But if not you could make the component B injected in A dynamic (e.g. specified as a prop/children) and leave it out entirely in your test. I've heard that a
by azangru 4y ago
> But if not you could make the component B injected in A dynamic (e.g. specified as a prop/children) and leave it out entirely in your test.
I've heard that advice before; this is why I made my example a bit more complicated, by saying that I want to swap out C (or D, or E, or whatever great-grand-child might be the troublesome one). The ultimate setup, hypothetically, could look something like this:
import TroublesomeChild from './TroublesomeChild';
const ComponentA = () => (
<div>
<ComponentB />
{props.children}
</div>
);
const ComponentB = () => (
<div>
<TroublesomeChild />
{props.children}
</div>
);
One could advocate for passing `TroublesomeChild` to component B as a dedicated prop to make component B more testable; but if we are testing component A, then we would also have to pass component B in a dedicated prop. And what do we do if there are multiple troublesome children? Creating dedicated properties for them is neither idiomatic from component authoring perspective, nor very scaleable.
- Aeolun 4y ago> why I made my example a bit more complicated It doesn’t really change that you need to be able to test every component in isolation. For A this means you need to be able to swap B, for B this means you need to be able to swap C, etc. > Creating dedicated properties for them is neither idiomatic from component authoring perspective, nor very scaleable. I’d say if you are trying to do this for more than 3 components in the same parent you are probably doing something wrong with your structure in the first place.