Understanding testStateMachine

[hally9k]

Firstly - Awesome work here man!! ❤️❤️❤️

Secondly - I am trying to understand testStateMachine from reading the README and I'll admit I'm slightly stumped. So I thought I'd reach out for some help and then maybe I can return the favour by fleshing out the README to be more friendly to slow people, like myself.

The main thing I'm having trouble with is how to pass props into the component. After reading the README I thought that the initialData object in the fixtures would be passed into the component as props, but this doesn't seem to work. Am I missing something?

[MicheleBertoli]

Thank you very much for opening this issue, and for the kind words, @hally9k.

Unless I'm missing something, initialData is what you are looking for.

For example:

test('props work', () => {
  const myStatechart = {
    initial: 'myState',
    states: { myState: {} },
  }
  const MyComponent = props => <div>{props.myProp}</div>
  const StateMachine = withStateMachine(myStatechart)(MyComponent)
  const initialData = { myProp: 'Hello, Props!' }

  testStateMachine(StateMachine, { fixtures: { initialData } })
})

Generates the following snapshot:

exports[`props work: myState 1`] = `
<div>
  Hello, Props!
</div>
`;

Please let me know if this answers your question, and any contribution to the README is more than welcome.

[hally9k]

@MicheleBertoli - I think this one might want to stay open. I appear to be able to reproduce when I pass nested objects as props. This is an example that fails:

it('props work', () => {
        const myStatechart = {
            initial: 'myState',
            states: { myState: {} }
        }

        const MyComponent = (props) => <div>{props.node.content.text}</div>

        const StateMachine = withStateMachine(myStatechart)(MyComponent)
        const initialData = { node: { content: { text: 'woot' } } }

        testStateMachine(StateMachine, { fixtures: { initialData } })
    })

TypeError: Cannot read property 'content' of undefined
      100 |         }      
      101 |    
   > 102 |         const MyComponent = (props) => <div>{props.node.content.text}</div>          
        |                                                         ^
        103 |
      104 |         const StateMachine = withStateMachine(myStatechart)(MyComponent)      
      105 |         const initialData = { node: { content: { text: 'woot' } } }

[MicheleBertoli]

Aha, good catch - Fixed in v4.0.4.
Thank you very much!