Problem using redux form about cavy

[AbigailMcP]

Ah I see! Sorry, I'm unfamiliar with how Redux Form works.

I've taken a closer look and think I have a solution - you're almost there!

In your form component:

<Field name="email" cavyName='LoginScreen.Username' component={RenderInput} />
<Field name="name" cavyName='LoginScreen.Password' component={RenderInput} />

In your RenderInput component:

export default function RenderInput({ input, cavyName }) {
  const generateTestHook = useCavy();
  const TestableTextInput = wrap(TextInput);

  return( 
    <TestableTextInput {...input} ref={generateTestHook(cavyName)}/>
  )
}

and in your tests:

spec.it('Success Index', async function() {
  ...
  const username = await spec.findComponent('LoginScreen.Username');
  usernameInput.props.onChange('abigail');

  const password = await spec.findComponent('LoginScreen.Password');
  passwordInput.props.onChange('mypassword');
});

Running these tests with this code works for me :)

Compared to your solution, there were two things I needed to change to get this to work due to how Redux Form is rendering it's components:

1. Wrapping the input component (see these docs).
2. Not using fillIn - when I inspected the components returned in the test using findComponent, I could see that onChangeText was not included in its props (which is what fillIn uses under the hood). However, I saw that there was an onChange prop that I could call directly! (see these docs).

[AbigailMcP]

Hi @FR98 ! Have you tried adding the generateTestHook ref to the inner <TextInput> instead of the <Field> component? Cavy needs a reference to the component with the onChangeText prop for fillIn to work.

[FR98]

Hi @AbigailMcP , thanks for your response... I can't do that because I use the <Field> component in others input fields at the same time (username and password) so I cannot define the generateTestHook ref in the inner <TextInput>. So I tried through pass the ref but it doesn't work as I spected and then I tried to define the generateTestHook ref in the <Field> dynamicaly by passing the name but it doesnt work... I dont know why (I think it should work) :(

So... I think the solution is to through pass the ref from the <Field> to the inner <TextInput>, but I could not. Do you have any idea?

[FR98]

Oh, it works! Thank you so much!