harblaith7/React-Testing-Library-Net-Ninja

HTML title property of the main heading is hardcoded as "Header"

Opened this issue · 0 comments

Wrote a test for your app like this:

  it("shows HTML title that's passed from parent component", () => {
    render(<Header title="test-title" />);
    const header = screen.getByRole("heading");
    expect(header.title).toBe("test-title");
  })

returns the output:

  ● Header › shows HTML title that's passed from parent component

    expect(received).toBe(expected) // Object.is equality

    Expected: "test-title"
    Received: "Header"

      25 |     render(<Header title="test-title" />);
      26 |     const header = screen.getByRole("heading");
    > 27 |     expect(header.title).toBe("test-title");
         |                          ^
      28 |   })
      29 | })
      30 |

And this shows in the app: when you hover over either the Todo or the Followers heading, you get the title as Header.