styled-components 測試工具

測試工具

find v3

在給定的DOM根中查找樣式化組件的呈現(xiàn)DOM節(jié)點(diǎn)的單個(gè)實(shí)例的便捷方法。

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節(jié)點(diǎn)的所有實(shí)例的便捷方法。 

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

一種用于在酶包裝紙中查找特定樣式的組件實(shí)例的便捷方法。

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)