gethyl / reactreduxtestingusingjestenzyme

Testing of React-Redux app using Jest and Enzyme.

Testing a React-Redux app using - Jest and Enzyme

A small React-Redux calculator app which does just addition and subtraction.

This app is created mainly to emphasize TDD and unit testing.

---

Testing libraries and frameworks used

• Jest - Unit Testing framework for ReactJs developed by Facebook
• Enzyme - JS testing utility developed by Airbnb to make it easier to assert React Components

---

reactreduxtestingusingjestenzyme's Issues

How to test a nested component exists

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

Question, Why you have Connected home? And I got wrong type when I trying to create snapshot of home.

ReactReduxTestingUsingJestEnzyme/__test__/Home.spec.js

Line 4 in a564731

import ConnectedHome,{Home} from '../src/js/components/Home'