Тестирование Router.push () с шуткой и синоном - PullRequest
Новая
       8

Тестирование Router.push () с шуткой и синоном

0 голосов
/ 05 марта 2019

Попытка протестировать эту функцию в классе '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 в тест, но ошибка показывает: «Метод"props" предназначен для запуска на 1 узле. Вместо 0 найдено "Есть идеи?

1 Ответ

0 голосов
/ 22 марта 2019

Я думаю, что проблема в том, что вы пытаетесь вызвать onClick опору на AppBar, но это опора каждого Tab.Имея в виду, что вы пытаетесь достичь большего охвата, вы должны протестировать его следующим образом:

Предположим, что ваш код находится в функции рендеринга, и для каждого Tab действует id: 

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