styled-components 测试工具

测试工具

find v3

在给定的DOM根中查找样式化组件的呈现DOM节点的单个实例的便捷方法。

import styled from 'styled-components'
import { find } from 'styled-components/test-utils'

const Foo = styled.div`
  color: red;
`

/**
 * Somewhere in your app:
 *
 * ReactDOM.render(
 *   <main>
 *     <Foo />
 *   </main>, document.body
 * );
 */

// retrieves the first instance of "Foo" in the body (querySelector under the hood)
find(document.body, Foo) // HTMLDivElement | null

findAll v3

在给定DOM根目录中查找样式化组件的渲染DOM节点的所有实例的便捷方法。 

import styled from 'styled-components'
import { findAll } from 'styled-components/test-utils'

const Foo = styled.div`
  color: ${props => props.color};
`

/**
 * Somewhere in your app:
 *
 * ReactDOM.render(
 *   <main>
 *     <Foo color="red" />
 *     <Foo color="green" />
 *   </main>, document.body
 * );
 */

// retrieves a NodeList of instances of "Foo" in the body (querySelectorAll under 

enzymeFind v4

一种用于在酶包装纸中查找特定样式的组件实例的便捷方法。

import { mount } from 'enzyme'
import styled from 'styled-components'
import { enzymeFind } from 'styled-components/test-utils'

const Foo = styled.div`
  color: red;
`

const wrapper = mount(
  <div>
    <Foo>bar</Foo>
  </div>
)

enzymeFind(wrapper, Foo)