使用jest和sinon测试Router.push（）

Question

试图在类'Nav'中测试这个功能我的目标是测试路由器，或者更重要的是在Router.push（/）上获得覆盖

<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('Test for navigation', () => {
let sandbox;

beforeAll(() => {
    sandbox = sinon.createSandbox();
});

afterEach(() => {
    sandbox.restore();
});

it('should render with data', () => {
    const stub = jest.fn();
    sandbox.stub(Router, 'push').callsFake(stub);
    const wrapper = shallow(<Nav authenticated />);
    expect(wrapper).toMatchSnapshot();
    expect(stub.mock.calls.length).toBe(0);
    wrapper.find(AppBar).props().onClick('test');
    expect(stub.mock.calls.length).toBe(7);
});

});

然而，我遇到了一个问题，我似乎无法找到'AppBar'的支柱我已经导入Nav进入测试，但错误读取，“方法”道具“意味着在1个节点上运行.0找到而不是”任何想法？

Answer 1

我认为问题是你试图在onClick上调用AppBar道具，但这是每个Tab的道具。考虑到你正试图达到更多的覆盖范围，你应该像这样测试：

让我们将代码置于渲染函数中，并且id prop对每个Tab都有效：

render(){
<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 id="Tab1" label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab id="Tab2" label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab id="Tab3" label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab id="Tab4" label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab id="Tab5" label="example" alt="example" onClick={() => Router.push('/example')}/>
                            <Tab id="Tab6" label="example" alt="example" onClick={() => Router.push('/example')}/>
                        </Tabs>
                    </div>
                </Grid>
            ) : (
                authenticated && <BurgerMenu/>
            )}

        </Toolbar>
</AppBar> }

现在让我们在你的测试中找到Tab1：

it('should render with data', () => {
    const stub = jest.fn();
    sandbox.stub(Router, 'push').callsFake(stub);
    const wrapper = shallow(<Nav authenticated />);
    expect(wrapper).toMatchSnapshot();
    expect(stub.mock.calls.length).toBe(0);
    const tab1 = wrapper.find(`[id="Tab6"]`);   
    tab1.simulate("clic");

    expect(stub.mock.calls.length).toBe(1);   
});