Jest-тестирование компонентов React

Question

Здравствуйте, ниже у меня есть компонент навигации

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>
    );    }}

Мне нужно проверить этот компонент, в моем файле nav.test.js у меня есть следующий код

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);
  });
});

Однако, когдапри выполнении моих тестов я получаю следующую ошибку

Может кто-нибудь увидеть, где я иду не так?Я пытался найти проблему, читая документацию с помощью Jest, и монтирование, кажется, лучший вариант, однако я новичок в модульном тестировании, поэтому это может быть неправильно.Спасибо

Answer 1

Эта строка:

container = mount(<Nav />);

... выдает ошибку , в то время как ваш компонент выполняет рендеринг .

beforeEach завершает обнаружение ошибки, котораяпозволяет продолжить тест, но container - это undefined.

Когда Jest начинает выполнение теста, эта строка завершается с ошибкой:

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

... потому что containerundefined, что приводит к сбою вашего теста с этим сообщением об ошибке.

Так что эта ошибка на самом деле не имеет ничего общего с реальной проблемой, реальная проблема заключается в том, что ваш компонент выдает ошибку, когда он отображает.

Answer 2

Вы должны использовать shallow вместо mount.

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