Тестирование Router.push() с помощью jest и sinon

Пытаясь протестировать эту функцию в классе Nav, я стремлюсь протестировать Router или, что более важно, получить охват 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.handleChangeEvent}>
                                <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 " Есть идеи?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
454
1

Ответы 1

Я думаю, что проблема в том, что вы пытаетесь вызвать onClick реквизит на AppBar, но это реквизит каждого 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.handleChangeEvent}>
                            <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);   
});

Другие вопросы по теме