Пытаясь протестировать эту функцию в классе 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 " Есть идеи?





Я думаю, что проблема в том, что вы пытаетесь вызвать 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);
});