How to test a nested component exists

[CristianoYL]

Hi @Gethyl , I read your post on Testing a React-Redux app using Jest and Enzyme, which is very helpful.

I tried to implement the techniques into my own project but I ran into some issue. I'm using some components from material-ui, and I understand that shallow rendering would not be suitable to test my component (nested with material-ui components). However, I would still want some way to test it as a "dumb" component, without involving redux. Do you think it's possible? If so, what would be your recommended way?

FYI, here's a general idea what my component might look like. Some specific configurations (redux, prop validation) are omitted. I'm trying to follow your example and test if the component contains the placeholder inside the InputLabel.

export class SearchBar extends Component {
  render() {
    const { classes } = this.props;
    const { placeholder } = this.props;
    return (
      <Paper className={classes.searchBarPaper} elevation={2}>
        <FormControl className={classes.margin} fullWidth>
          <InputLabel htmlFor="input-with-icon-adornment">
            {placeholder}
          </InputLabel>
          <Input
            id="input-with-icon-adornment"
            endAdornment={(
              <InputAdornment position="end">
                <Search />
              </InputAdornment>
            )}
            onKeyPress={this.onKeyPress}
            onChange={event => this.setState({ searchText: event.target.value })}
          />
        </FormControl>
      </Paper>
    );
  }
}

Thanks,
Li