Cannot access a components state or methods when using aliases.

[bizmonogatari]

In previous version of this library, the following code worked:

    // This is code to simulate a file being selected for upload
    cy.get('@App').then((instance: any) => {
      const testFile1 = new File(['data to upload'], 'img.png', { type: 'image/png' })
      instance.getFiles = cy.stub().returns([testFile1])
      cy.get('[data-cy=filePicker]').trigger('change')
    })

This does not seem to work anymore because the object retrieved using cy.get('@App') does not contain its methods or its state (which I would also like access to). At the moment it seems that only the "props" and "type" fields are available.

[bahmutov]

So we removed direct instance reference from v4 - it was exposing too many internal details we thought. Instead we recommend using https://github.com/abhinaba-ghosh/cypress-react-selector (see example https://github.com/bahmutov/cypress-react-unit-test/blob/master/cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js) or coding around it. Can I ask what is the component doing in this case? Can I see the upload code?

[bahmutov]

Take a look at https://github.com/bahmutov/react-hooks-file-upload and at React upload example in https://github.com/cypress-io/cypress-example-recipes#unit-testing

[bizmonogatari]

Thanks for the help! I managed to get file upload working using this method:

    cy.get('[data-cy=filePicker]').trigger('change', {
      testFiles: [testFile1]
    })

The function in my code that is responsible for handling the files is:

 getFiles = (event: any) => {
   console.log(event)
   return event.nativeEvent.testFiles || event.target.files || event.dataTransfer.files
 }

As you can see I am printing the event for debugging purposes.
However when I look at the logs it turns out that e.nativeEvent is null. Yet it somehow works. I am very confused...

[bahmutov]

Can you put debugger keyword there to see what is going on?

…

Sent from my iPhone

On Jun 15, 2020, at 22:19, Tom Oliver ***@***.***> wrote:  Thanks for the help! I managed to get file upload working using this method: cy.get('[data-cy=filePicker]').trigger('change', { testFiles: [testFile1] }) The function in my code that is responsible for handling the files is: getFiles = (event: any) => { console.log(event) return event.nativeEvent.testFiles || event.target.files || event.dataTransfer.files } As you can see I am printing the event for debugging purposes. However when I look at the logs it turns out that e.nativeEvent is null. Yet it somehow works. I am very confused... — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[bizmonogatari]

Ah It shows up now!
I didn't know that the event references become null unless you use a breakpoint or the debugger statement!

Thanks so much for helping out! I'll remember to use this trick in the future!