It would be nice to have some way to dynamically change the props of a component under test?

[richardbarrell-calvium]

I am running into a slightly awkward use case sometimes is where I have something which is stateful and I need to test that it responds correctly to prop changes (e.g. by resetting state or changing the destination of an in-progress animation).

What I've ended up doing so far is using addSceneTest with a one-off component, all defined inline, that has a form and the component under test in it. e.g.

class ComponentUnderTest extends React.Component {
  /* pretend a complicated component with its own componentWillUpdate() method is here */
  render() {
    const {text} = this.props;
    return <Text>{text}</Text>;
  }
} 
ComponentUnderTest.propTypes = {
  text: PropTypes.string.isRequired,
};

class TestScene extends React.Component {
  state = {
    text: 'initial test value',
  }
  _onText: text => this.setState({text})
  render() {
    return (
      <View>
        <TextInput value={this.state.text} onChangeText={this._onText} />
        <ComponentUnderTest text={this.state.text} />
      </View>
    );
  }
}

addSceneTest(() => TestScene, {
  name: 'ComponentUnderTest',
  title: 'ComponentUnderTest with changeable text prop',
});

Could there be a nicer way of doing this?

[benvium]

It would be quite interesting to imagine having a UI, automatically built from the propTypes, where you could tweak the props of the component you're testing. Would be a fair amount of work to get right though. Until then, if you use react-native-debugger's React panel you can get see and tweak props live on your component but it's not quite as convenient as the above could be.