Jest Testing for React components

Question

Hello below I have my navigation component

class Nav extends Component {
constructor(props){
    super(props);
    this.state = {
        anchorEl: null,
        layoutMode: 'desktop',
        value: tabs.findIndex(tab => {return tab.href === this.props.router.pathname; })
    };
}

render() {
    const { classes, authenticated, user } = this.props;
    const { anchorEl, value } = this.state;
    const open = Boolean(anchorEl);
    let firstLetter;
    if (user) {
        firstLetter = user.email.charAt(0);
    }
    return (
        <AppBar className={classes.appBar} position="static">
            <Toolbar className={classes.toolbar}>
                <img src="/static/images/Bluelight_Header_Bitmap.jpg" alt="blpd logo" className = {classes.logo}/>
                {authenticated && this.state.layoutMode ==='desktop' ? (
                    <Grid container
                        direction ="row"
                        justify="flex-end"
                        alignItems="center">
                        <div>
                            <Tabs id="Tab" value={value} onChange={this.handleChange}>
                                {tabs.map(tab => {
                                    return (<LinkTab key={tab.href} classes={{ root: this.props.classes.tabRoot }} label={tab.label} alt={tab.label} href={tab.href}/>);})}
                            </Tabs>
                        </div>
                    </Grid>
                ) : (
                    authenticated && <BurgerMenu/>
                )}
                <div style={{ marginLeft: 'auto' }}>
                    <IconButton
                        aria-owns={open ? 'menu-appbar' : undefined}
                        aria-haspopup="true"
                        onClick={this.handleMenu}
                        color="inherit"
                        alt="Icon Button"
                        aria-label="Login Button"
                        style={{margin: '5px'}}
                    >
                        {!authenticated ? <div></div> :
                            <AccountCircle/>
                        }
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        open={open}
                        onClose={this.handleClose}
                    >
                        {user && <MenuItem divider={true}>
                            <CardHeader
                                titleTypographyProps={{ variant:'title' }}
                                subheaderTypographyProps={{ variant:'body2' }}
                                avatar={<Avatar>{firstLetter}</Avatar>}
                                title={user.email}
                                subheader={user.email}

                            />
                        </MenuItem>}
                        <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                        <MenuItem onClick={this.handleClose}>My account</MenuItem>
                        {authenticated?
                            <a href='/auth/logout'><MenuItem>Logout</MenuItem></a>:
                            <a href='/auth'><MenuItem>Login</MenuItem></a>
                        }
                    </Menu>
                </div>
            </Toolbar>
        </AppBar>
    );    }}

I need to test this component, within my nav.test.js file i have the following code

describe('NavBar', () => {
  const intialState = {
    ui: { width: 1361 },
    auth: { authenticated: true }
  };

  let container;
  beforeEach(() => {
    container = mount(<Nav />);
  });

  it('should contain an AppBar', () => {
    expect(container.find(AppBar)).toHaveLength(1);
  });
});

However when running my tests i receive the following error

Can anyone see where i am going wrong? I have tried to find the problem by reading documentation with Jest and mount seems to be the best option, however i am new to unit testing so this could be wrong. Thankyou

Answer 1

This line:

container = mount(<Nav />);

...is throwing an error while your component is rendering .

The beforeEach ends up catching the error which allows your test to continue, but container is undefined .

When Jest starts running your test this line fails:

expect(container.find(AppBar)).toHaveLength(1);

...because container is undefined which causes your test to fail with that error message.

So that error really doesn't have anything to do with the real problem, the real problem is that your component is throwing an error as it renders.

Answer 2

You should use shallow instead of mount .

beforeEach(() => {
    container = shallow(<Nav />);
  });