Как я могу проверить аргументы, передаваемые в рендер проп?

Question

У меня есть следующий компонент, Layout:

const Layout = ({ children, data, ...otherProps }) => (
  <ErrorBoundary>
    <App render={({ isSidebarOpen, scrollTop, toggleSidebar }) => (
      <React.Fragment>
        <Helmet
          title={get(data, 'site.siteMetadata.title')}
          meta={[
            { name: 'description', content: get(data, 'site.siteMetadata.description') },
            { name: 'pinterest', content: 'nopin' },
            { name: 'og:title', content: 'Daniel Spajic' },
            { name: 'og:description', content: get(data, 'site.siteMetadata.description') },
            { name: 'og:type', content: 'website' },
            { name: 'og:url', content: get(data, 'site.siteMetadata.siteUrl') },
            { name: 'og:image', content: ogImage },
            { name: 'og:locale', content: 'en_AU' },
          ]}
        >
          <link rel="shortcut icon" type="image/png" href={favicon} />
          <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
        </Helmet>
        <div id={PAGE_CONTENT_CONTAINER_ID}>
          <Sidebar isOpen={isSidebarOpen} toggle={toggleSidebar} />
          <div id={PAGE_CONTENT_ID}>
            {children({ scrollTop, toggleSidebar, ...otherProps })}
          </div>
        </div>
      </React.Fragment>
    )}
    />
  </ErrorBoundary>
);

Как показано, он создает App с render проп. Аргументы isSidebarOpen и scrollTop для опоры принадлежат состоянию App. toggleSidebar - это один из методов App.

Я хочу проверить несколько вещей:

1. Рендеринг Sidebar устанавливает его toggle prop в toggleSidebar, а isOpen prop в isSidebarOpen
2. Функция children вызывается с объектом, содержащим scrollTop, toggleSidebar и otherProps в качестве аргумента

Они включают получение состояния App и методов для сравнения. Я попытался получить доступ к его состоянию с помощью Enzyme, но это невозможно, потому что state() доступен только на корневом узле:

ShallowWrapper::state() can only be called on the root

Следовательно, как я могу получить доступ к App состоянию и методам, чтобы я мог проверить эти вещи?

Answer 1

ShallowWrapper::state() can only be called on the root может не быть проблемой, потому что тестируемые значения должны быть жестко закодированы в модульных тестах.Лучше заставить тест непреднамеренно провалиться там, где он должен пройти, чем заставить его непреднамеренно пройти там, где он должен провалиться, первый гораздо проще отладить и исправить.

Хотя может быть полезно получить состояние компонента, внаименьшее количество утверждений.

const layoutWrapper = mount(<Layout/>);
const appWrapper = layoutWrapper.find(App).dive();

expect(appWrapper.state('isSidebarOpen')).toBe(false);
expect(appWrapper.first(Sidebar).props('isOpen').toBe(false);

appWrapper.setState({ isSidebarOpen: true });

expect(appWrapper.state('isSidebarOpen')).toBe(true);
expect(appWrapper.first(Sidebar).props('isOpen').toBe(true);

В этом компоненте много движущихся частей, это также подтверждается тем, что его следует проверять с mount, а не с shallow.может быть полезно предоставить мелкозернистые изолированные тесты, то есть тест render реквизит отдельно:

const layoutWrapper = mount(<Layout/>);
const appWrapper = layoutWrapper.first(App);
const Child = appWrapper.prop('render');

const childWrapper = shallow(<Child isSidebarOpen={false} ... />);

expect(childWrapper.find(Sidebar).props('isOpen').toBe(false);
...

И как App состояние взаимодействует с render реквизитом, должно быть протестировано в выделенном App компонентетест.