对React组件进行Jest测试

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阅读文档来找到问题，mount似乎是最好的选择，但我是单元测试的新手，所以这可能是错误的。谢谢

Answer 1

这一行：

container = mount(<Nav />);

...在组件渲染时抛出错误。

beforeEach最终捕获错误，允许你的测试继续，但container是undefined。

当Jest开始运行测试时，此行失败：

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

...因为container是undefined导致您的测试失败并显示该错误消息。

所以这个错误实际上与真正的问题无关，真正的问题是你的组件在渲染时会抛出错误。

Answer 2

你应该使用shallow而不是mount。

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