queryByText failing when querying a component that returns a string

[hnordt]

• dom-testing-library version: 2.4.0
• react version: 16.3.2

Relevant code or config:

import "dom-testing-library/extend-expect"

import React from "react"
import { render } from "react-testing-library"

const App = () => "Hello World!"

test("App renders without crashing", async () => {
  const { queryByText } = render(<App />)
  expect(queryByText("Hello World!")).toBeInTheDOM()
})

What you did:

I ran the test.

What happened:

It returned an error:

Cannot read property 'match' of null

TypeError: Cannot read property 'match' of null
    at module.exports.str (https://j4rkx7jmlv.codesandbox.io/node_modules/strip-indent/index.js:3:20)

Reproduction:

https://codesandbox.io/s/j4rkx7jmlv

Problem description:

I expect queryByText() to work with components that return a string.

Suggested solution:

Improve queryByText() so it supports components that return a string.

[sompylasar]

Full call stack, https://j4rkx7jmlv.codesandbox.io/ -> ~/:

Cannot read property 'match' of null

TypeError: Cannot read property 'match' of null
    at module.exports.str (~/node_modules/strip-indent/index.js:3:20)
    at module.exports (~/node_modules/redent/index.js:5:55)
    at getMessage (~/node_modules/jest-dom/dist/utils.js:31:212)
    at message (~/node_modules/jest-dom/dist/to-be-in-the-dom.js:22:36)
    at https://codesandbox.io/static/js/sandbox.7db5ccbe.js:153:132422
    at Object.s [as toBeInTheDOM] (https://codesandbox.io/static/js/sandbox.7db5ccbe.js:153:132499)
    at _callee$ (~/src/App.test.js:39:47)
    at g (https://codesandbox.io/static/js/common-sandbox.405431f9.js:21:10482)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.405431f9.js:21:10270)
    at Generator.e.(anonymous function) [as next] (https://codesandbox.io/static/js/common-sandbox.405431f9.js:21:10661)
    at step (~/src/App.test.js:21:191)
    at eval (~/src/App.test.js:21:437)
    at new Promise ()
    at Object.eval (~/src/App.test.js:21:99)

The most interesting part:

    at module.exports.str (~/node_modules/strip-indent/index.js:3:20)
    at module.exports (~/node_modules/redent/index.js:5:55)
    at getMessage (~/node_modules/jest-dom/dist/utils.js:31:212)
    at message (~/node_modules/jest-dom/dist/to-be-in-the-dom.js:22:36)

jest-dom's getMessage assumes expectedValue and receivedValue to always be strings, passing them to redent for reformatting, but looks like it's not the case if it's called from in toBeInTheDOM where received is required to be an HTMLElement or a falsy value.

[kentcdodds]

This appears to be an issue with jest-dom and not dom-testing-library. Perhaps there could be some more helpful error messages here. Please file an issue there! Thanks!

[gnapse]

Coincidentally this was being worked on and fixed in testing-library/jest-dom#15 but the build on travis is failing and I'm working on it so it's not released yet.

[gnapse]

This should be fixed now in jest-dom v1.3.1. Can you please try it out and confirm that it's working? If it isn't, please file an issue in jest-dom.

[utk-santhoshraju]

I got the same error, but the way I got this is dark magic.

It was working while I was writing tests, and then all of a sudden it broken everything.