энзим, как искать кнопку внутри рендера реквизит маршрута

Question

Я новичок в React и Enzyme и писал тестовый пример для рендеринга кнопки.Может кто-нибудь, пожалуйста, скажите мне, как искать кнопку внутри рендера проп из Route?Это мой компонент:

            export default class App extends React.Component {
                render() {
                    return (
                        <div className='class1'>
                        .....
                            <Route id='Route-Home' render={({history}) => (
                                <Button id='Home-Button' onClick={() => {
                                    history.push(Constants.PATHS.HOME);
                                }}
                                text='Home' variant='emphasis'/>
                            )} />
                        .....
                        </div>
                    );
                }
            }

Самое близкое, что я нашел в моем тестовом примере:

            describe('App', () => {
                let wrapper;
                beforeAll(()=>{
                    wrapper = shallow(<App />);
                }
                it('should render Home Button', () => {
                expect(wrapper.find('#Route-Home').prop('render').length).toBe(1);

                });

            });

Не удалось найти никакого рабочего решения о том, как проверить, отображается ли кнопка.Любые предложения приветствуются!

Answer 1

Извлеките функцию, которую вы передали в render пропущенную часть маршрута, и протестируйте ее отдельно.Вот пример кода:

export const routeRenderFn = ({history}) => (
  <Button id='Home-Button' onClick={() => {
    history.push(Constants.PATHS.HOME);
  }}
  text='Home' variant='emphasis'/>
);

...

<Route id='Route-Home' render={routeRenderFn} />