Suppose there's a root <App />
which houses multiple components, one of them being, say <SearchBox />
.
App component houses the app state (such as searchResults
array) and iterates the results underneath the <SearchBox onResults={this.onResults}/>
as <SearchResult url={url} title={title}/>
Inside the SearchBox component, a call to a library is made which in turn calls a remote API, which then returns results back to onResults
that is passed to the child SearchBox.
In other words, we have:
App (has state which is modified w/ onResult
) -> SearchBox
(receives onResult
) -> API Call
and then:
API Call -> SearchBox
-> <App />
(via onResult
callback) -> Update state -> Render results in <App />
What is the appropriate way of testing the functionality of <SearchBox />
component given that it relies on being passed a function from the parent?
I'm thinking:
- Mock the prop
- Mock the search library (return some fixture)
- Test the component "in a vacuum" and see if the mocked function runs?
Or should this be tested by instead testing the parent component and supplying an unadulterated onResults
from the parent and somehow watching that it was in fact called?
What is the appropriate way to test this component setup? Is this spilling over into integration testing territory vs unit testing? (on that point, how would an integration test be setup if it relies on a call to an API which may or may not be successful?)