Jest-dom: Calling `getByText` with a number fails with `TypeError: matcher.test is not a function`

[gogaz]

• @testing-library/jest-dom version: 4.2.4
• node version: 12.15.0
• yarn version: 1.19.2
  
  
  
  • react-testing-library version: 9.4.0
  
  

Relevant code or config:

import React, from "react"

const TheAnswer = () => (
  <h1>
    <span>42</span>
    is the answer
  </h1>
)

What you did:

describe("TheAnswer", () => {
  test("Test the answer of the universe", async () => {
    const rendered = render(<TheAnswer />)

    rendered.getByText("is the answer")
    rendered.getByText(42)
  })
})

What happened:

    TypeError: matcher.test is not a function

      2  |     test("Test the answer of the universe", async () => {
      3  |         const rendered = render(<TheAnswer />)
      4  |
      5  |         rendered.getByText("is the answer")
    > 6  |         rendered.getByText(42);
         |                  ^
      7  |     });

      at matches (node_modules/@testing-library/dom/dist/matches.js:39:20)
      at node_modules/@testing-library/dom/dist/queries/text.js:31:142
          at Array.filter (<anonymous>)
      at queryAllByText (node_modules/@testing-library/dom/dist/queries/text.js:31:127)
      at node_modules/@testing-library/dom/dist/query-helpers.js:73:17
      at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:59:17)
      at _callee2$ (./tests/TheAnswer.test.js:6:18)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:271:22)
      at Generator.prototype.<computed> [as next] (node_modules/regenerator-runtime/runtime.js:97:21)
      at asyncGeneratorStep (./tests/TheAnswer.test.js:15:33)
      at _next (./tests/TheAnswer.test.js:15:39)

Problem description:

The error is very much misleading and does not provide any clue why the test is failing, I don't think it should be failing at all anyway.
The problem also happens with different syntaxes:

rendered.getByText({text: 42}) fails

import { render, getByText } from "../testing-utils"
// ...
const { container } = render(<TheAnswer />)
getByText(container, 42) // Fails as well

Suggested solution:

cast the argument passed to getByText to a string

[afontcu]

Hi! 👋 _(this seems to be related to DOM Testing Library, not jest-dom!)_

While I agree that the error is not that helpful, notice that the query is called getByText, not getByNumber ;) The rendered element in screen is a string, so you should look for a string.

rendered.getByText('42') will pass.

I'm closing this up, but feel free to open up a new one in DOM Testing Library if you want to suggest a more helpful error message or a strong type checking for the query!

Thanks!