react-test-renderer如何创建带有上下文的组件？

Question

react-test-render的Api表示：

TestRenderer.create(元素，选项)；

create的有效选项是什么？我可以用它来设置组件的上下文吗？

https://reactjs.org/docs/test-renderer.html#reference

Answer 1

context接口不支持直接设置context- check out the create implementation here。

您可以创建一个简单的包装器，只传递上下文：

import React from 'react'
import TestRenderer from 'react-test-renderer'
import PropTypes from 'prop-types'

// The example component under test
export default class WithContext extends React.Component {
  static contextTypes = {
    someProperty: PropTypes.any,
  }

  render () {
    return (
      <div>{ this.context.someProperty }</div>
    )
  }
}

describe('<WithContext>', () => {
  it('renders the supplied context', () => {
    const tree = TestRenderer.create(
      <PassContext value={{ someProperty: 'context' }}>
        <WithContext />
      </PassContext>
    )

    tree.root.find(findInChildren(node =>
      typeof node === 'string' &&
      node.toLowerCase() === "context"
    ))
  });
});

class PassContext extends React.Component {
  static childContextTypes = {
    someProperty: PropTypes.any,
  }

  getChildContext () {
    return this.props.value
  }

  render () {
    return this.props.children
  }
}

// Returns a TestInstance#find() predicate that passes
// all test instance children (including text nodes) through
// the supplied predicate, and returns true if one of the
// children passes the predicate.
function findInChildren (predicate) {
  return testInstance => {
    const children = testInstance.children
    return Array.isArray(children)
      ? children.some(predicate)
      : predicate(children)
  }
}