使用Jest进行单元测试,期待接收空/未定义对象的问题

问题描述 投票:0回答:1

我是单元测试的新手,我正在尝试测试导航栏的长度,下面你可以看到一个类中的导航栏组件

<AppBar className={classes.appBar} position="static">
        <Toolbar className={classes.toolbar}>
            {authenticated && this.state.layoutMode ==='desktop' ? (
                <Grid container
                    direction ="row"
                    justify="flex-end"
                    alignItems="center">
                    <div className={classes.root}>
                        <Tabs id="Tab" className = {classes.tabBar} value={value} onChange={this.handleChange}>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab label="example" alt="example" onClick={() => Router.push('/example')}/>
                        </Tabs>
                    </div>
                </Grid>
            ) : (
                authenticated && <BurgerMenu/>
            )}

以下是我到目前为止所写的测试

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

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

it('should render self and subcomponents', () => {
    expect(container).toMatchSnapshot();
});

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

})

但是我的问题是.find(AppBar)似乎没有找到,当使用控制台日志(container.find(AppBar))时,它显示以下“ShallowWrapper {}”这意味着该对象是空的,因此不是等于1,但是我不知道在哪里指向找到正确找到要测试的选项卡

reactjs unit-testing testing jestjs sinon
1个回答
0
投票

解决方案是

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

深浅地潜入DOM深处。

© www.soinside.com 2019 - 2024. All rights reserved.