Javascript React组件的Jest测试

您好，下面是我的导航组件

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

类导航扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主持人：空，
布局模式：“桌面”，
值：tabs.findIndex（tab=>{return tab.href===this.props.router.pathname；}）
};
}
render（）{
const{classes，authenticated，user}=this.props；
const{ancorel，value}=this.state；
常量开=布尔值（主播）；
让第一个字母；
如果（用户）{
firstLetter=user.email.charAt（0）；
}
返回(
:
}
);    }}

我需要测试这个组件，在我的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);
  });
});

description（'NavBar'，（）=>{
常量初始状态={
ui:{宽度：1361}，
身份验证：{已验证：true}
};
让容器；
在每个之前（（）=>{
容器=安装（）；
});
它（'应该包含AppBar'，（）=>{
expect（container.find（AppBar））.toHaveLength（1）；
});
});

但是，在运行测试时，我收到以下错误

---

谁能看出我错在哪里？我试图通过阅读Jest文档来发现问题，mount似乎是最好的选择，但是我对单元测试还不熟悉，所以这可能是错误的。谢谢

您应该使用

浅装

而不是

挂载

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

beforeach（（）=>{
容器=浅（）；
});

此行：

container = mount(<Nav />);

…因为

容器

是

未定义的

，这会导致测试失败并显示错误消息

---

因此，该错误实际上与真正的问题无关，真正的问题是组件在呈现时抛出错误。

我将尽可能地清理测试，从

Nav

中删除除空

AppBar

之外的所有内容，然后重试。这会澄清你的问题。是的，这就是重点。因为您希望独立地测试每个组件。Shallow将只渲染测试组件。Mount将呈现每个组件，包括所有子组件，但不应该是这样。测试显然是关于

查找
内部组件<代码>浅层
将不起作用。请参阅Anton Korzunov的以下文章“为什么我总是使用浅层渲染”。我也很惊讶，但是
装载
还允许在树中搜索（
查找（）
）自定义组件，就像它们没有渲染一样。我想这是因为
displayName
以某种方式被注入。所以根本原因（无论是什么）与“装载”与“浅层”差异无关。
expect(container.find(AppBar)).toHaveLength(1);