代码之家 › 专栏 › 技术社区 › Daniel

如何测试传递给呈现属性的参数?

enzyme reactjs

Daniel · 技术社区 · 6 年前

我有以下组件, 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 支持的理由都来自 应用程序 的状态。 toggleSidebar 是其中之一 应用程序 的方法。

我想测试一些东西:

渲染的 Sidebar 设置其 toggle 道具 接线柱 和 isOpen 道具 伊斯坦巴朗
这个 children 使用包含以下内容的对象调用函数 斯科洛托普 , 接线柱 和 otherProps 作为其论点

这些涉及检索 应用程序 的状态和比较方法。我试过用酶来了解它的状态,但这是不可能的,因为 state() 只能在根节点上访问:

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

所以我怎样才能进入 应用程序 我可以测试这些东西的状态和方法?

1 回复 | 直到 6 年前

Estus Flask 6 年前

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 状态与 提供 支柱应在专用设备中进行测试。 应用程序 元件测试。