testing-library / cypress-testing-library

🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices.
http://npm.im/@testing-library/cypress
MIT License
1.8k stars 152 forks source link

cypress cannot find the line number of failed .findBy commands #232

Closed rmmanseau closed 1 year ago

rmmanseau commented 1 year ago

first, to address this:

HI! PLEASE STOP TO READ THIS!! If your issue is regarding one of the query
APIs (`getByText`, `getByLabelText`, etc), then please file it on the
https://github.com/kentcdodds/dom-testing-library repository instead. If you
file it here it will be closed. Thanks :)

the getBy functions do work properly, but when they fail cypress is not able to figure out where the failure is coming from & point to it accurately. This makes for difficult debugging because it's not possible to immediately jump to the failed testing library commands. I believe that this issue does belong here, as the issue is specific to integration with cypress test runner.

Relevant code or config

describe('does not show failing assertion', () => {
  it('cy.findByText', () => {
    cy.mount(<App/>);
    cy.findByText(TEXT); // <---- cypress cannot tell that this line is the point of failure
  })

  it('cy.findByTestId', () => {
    cy.mount(<App/>);
    cy.findByTestId("code");
    cy.findByTestId("yeet"); // <---- cypress cannot tell that this line is the point of failure 
  })
})

What you did:

run a test that fails on a cy.findBy* command

What happened:

it creates a TestingLibraryElementError and dumps the entire state of the DOM

image

What I expected:

it generates an Assertion Error and points to the line of the failing assertion.

image

Reproduction repository: https://github.com/rmmanseau/cy-testing-library-repro

Problem description:

@testing-library/cypress doesn't generate the correct assertion type / stack trace / whatever is required by cypress in order for it to point to the location of the failing line.

Suggested solution:

do the thing that cypress expects.

NicholasBoll commented 1 year ago

I can look into this. This plugin takes the error created by DOM Testing Library to give more context to the error, but the stack trace isn't useful. Perhaps we can merge the message from DOM Testing Library and leave the rest of the assertion error alone.

NicholasBoll commented 1 year ago

If I replace the error message instead of the whole error, I can get what you want:

error message

The top portion is the DOM Testing Library message while the Cypress error maintains Cypress context and stack traces.

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 8.0.6 :tada:

The release is available on:

Your semantic-release bot :package::rocket: