Тестирование компонента рендеринга реквизита

Question

Если у меня есть компонент для рендеринга, например:

export class ParentComponent extends React.Component {
    render() {
        <Loader loading={false}>
                {() =>
                    <SomeChildComponent />
               }
    }
}

Как я могу протестировать его?

test('should output child component',  => {
    const wrapper = shallow(<ParentComponent />);
    expect(wrapper.find(SomeChildComponent).length).to.be(1);
}

Сбои - если я тестирую вместо компонента Loader - тест проходит:

  expect(wrapper.find(Loader).length).to.be(1);

Как проверить, что выводится SomeChildComponent?

Answer 1

Если вы используете Фермент 3.8.0 или выше, вы можете следовать этому руководству:

https://medium.com/@fran.villar.rosa/how-to-test-renderprops-with-enzyme-3-8-0-c079622f68ca

На вашем примере:

export class ParentComponent extends React.Component {
    render() {
        <Loader loading={false}>
                {() =>
                    <SomeChildComponent />
               }
    }
}


const wrapper = shallow(<ParentComponent />)
  .find(Loader)
  .renderProp('children')({yourPropsHere: 'example'});

expect(wrapper).toMatchSnapshot()

Вы должныимпортируйте ваш Loader компонент в ваш тестовый файл.

Answer 2

Ваша внутренняя функция () =><SomeChildComponent /> никогда не выполнялась, поэтому ваш тест говорит правду о том, что SomeChildComponent не существует.Вам просто нужно позвонить (обратите внимание на дополнительные скобки):

export class ParentComponent extends React.Component {
    render() {
        return (<Loader loading={false}>
            { (() =><SomeChildComponent />)()}
        </Loader>);
    }
}

Мы можем реорганизовать его в более render-props way:

export class ParentComponent extends React.Component {
    render() {
        return (<Loader loading={false}>
            { this.props.render()}
        </Loader>);
    }
}

И затем изменитьтест соответственно:

const render = () => <SomeChildComponent />;
const wrapper = shallow(
    <ParentComponent render={render} />
);

Однако этот тест на самом деле не становится unit тестом, поскольку он тестирует более одного компонента одновременно.Чтобы избавиться от этой зависимости, мы можем просто проверить, вызван ли render():

const renderMock = jest.fn();
const wrapper = shallow(<ParentComponent render={ renderMock } />);
expect(wrapper.find('Loader').exists()).toBeTruthy();
expect(renderMock).toHaveBeenCalled();

Если ваш render() принимает некоторые аргументы, вы можете рассмотреть возможность использования .toHaveBeenCalledWith