Ферментный тест React.createRef () - PullRequest
Новая
       23

Ферментный тест React.createRef ()

0 голосов
/ 06 июня 2018

У меня есть компонент, где я использую новый React.create() API, как проверить document.activeElement должен быть равным текущему компоненту ref.

компонент: 

export class Automatic extends Component {
    componentDidMount = () => this.focusContainer()
    componentDidUpdate = () => this.focusContainer()

    container = React.createRef()
    focusContainer = () => this.container.current.focus()

 render = () => {
        return (
            <div
                name='automatic'
                onKeyPress={this.captureInput}
                onBlur={() => setTimeout(() => this.focusContainer(), 0) }
                ref={this.container}
                tabIndex={0}
            >
               ..... 
            </div>
}

старое тестирование (работает): 

 it('should focus container on mount', () => {
        automatic = mount(<Automatic classes={{}} />, mountContext)

        document.activeElement.should.be.equal(automatic.ref('container'))
    })

новый (не работает): 

 it.only('should focus container on mount', () => {
        const container = React.createRef()
        automatic = mount(<Automatic classes={{}} />, mountContext)

        document.activeElement.should.be.equal(automatic.ref(container.current))
    })

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Обновлено с рабочими примерами.Добавлен пример стилевых компонентов.

Вот как я решил это с помощью Jest (использует разные утверждения, но концепция та же): 

// setup
const MyComponent = React.forwardRef((props, ref) => (
    <div>
        <span ref={ref}>some element</span>
    </div>
))

// test
it('should contain the forwarded ref in the child span', () => {
    const ref = React.createRef()
    const component = mount(
        <Fragment>
            <MyComponent ref={ref} />
        </Fragment>,
    )

    expect(component.find('span').instance()).toEqual(ref.current)
})
  • Идея в том,чтобы получить экземпляр элемента, который имеет ref.
  • Кажется, это работает только при переносе MyComponent в другой элемент, я использовал Fragment.

Я столкнулся с некоторыми проблемами при использовании ** Styled-Components.Это потому, что он создает ряд дополнительных элементов.Попробуйте отладить с console.log(component.debug()).Он покажет вам, какой фермент рендерит.

При отладке вы увидите, что Styled-Components использует рекомендуемый способ для пересылки реквизита.

Вы можете найти нужный элементиспользуя селектор свойств для forwardedRef: 

// setup
const El = styled.div`
    color: red;
`

El.displayName = 'El'

const MyComponentWithStyledChild = React.forwardRef((props, ref) => (
    <El ref={ref}>some element</El>
))

// test
it('should contain the forwarded ref in a rendered styled-component', () => {
    const ref = React.createRef()
    const component = mount(
        <Fragment>
            <MyComponentWithStyledChild ref={ref} />
        </Fragment>,
    )

    // Styled-components sets prop `forwardedRef`
    const target = component
        .find('[forwardedRef]')
        .childAt(0)
        .instance()

    expect(target).toEqual(ref.current)
})
  • Вы можете использовать тот же трюк, если создали компонент высшего порядка (HoC), где вам нужно передать ref
0 голосов
/ 06 июня 2018 
it('should focus container on mount', () => {
  automatic = mount(<Automatic classes={{}} />, mountContext)

        document.activeElement.should.be.equal(automatic.instance().container.current)
    })
...