用 jest 和 sinon 测试 Router.push()答案

【问题标题】：Testing Router.push() with jest and sinon用 jest 和 sinon 测试 Router.push()
【发布时间】：2019-07-27 00:31:05
【问题描述】：

尝试在“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反而” 有什么想法吗？

【问题讨论】：

标签： reactjs testing jestjs sinon

【解决方案1】：

我认为问题在于您试图在 AppBar 上调用 onClick 道具，但这是每个 Tab 的道具。考虑到您正在尝试扩大覆盖范围，您应该像这样测试它：

假设您的代码在渲染函数中，并且 id 属性对每个 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);   
});

【讨论】：