Question

我有以下内容，Input1: hello Input2: world Input3: foo Input4: bar {60: 'hello', 21: 'world', 55: 'foo', 10: 'bar'}：

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将其Sidebar属性设置为toggle，将toggleSidebar属性设置为isOpen
使用包含isSidebarOpen，children和scrollTop作为参数的对象调用toggleSidebar函数

这些涉及检索otherProps的状态和比较方法。我尝试使用酶来访问其状态，但这是不可能的，因为state()只能在根节点上访问：

App

因此，我如何访问ShallowWrapper::state() can only be called on the root的状态和方法，以便可以测试这些内容？

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 prop：

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属性的交互方式。

如何测试传递给渲染道具的参数？

1 个答案: