React-testing-library: matcher.test is not a function - when using custom renderer.

[jaredmeakin]

• react-testing-library version: 9.2.0
• react version: 16.9.0
• node version: _codesandbox_
• npm (or yarn) version: _codesandbox_

Relevant code or config:

Using the custom renderer provided in the setup example.

• https://testing-library.com/docs/react-testing-library/setup

What you did:

Followed the docs for adding a custom renderer. The one in my project actually uses react-router and redux, but for simplicity the example pen doesn't have either of those. However, it still throws the same error.

What happened:

When using a custom renderer the methods returned by render are not useable—specifically matchers.

matcher.test is not a function

TypeError: matcher.test is not a function
    at matches (https://4njet.csb.app/node_modules/@testing-library/dom/dist/matches.js:39:20)
    at eval (https://4njet.csb.app/node_modules/@testing-library/dom/dist/query-helpers.js:41:82)
    at Array.filter (<anonymous>)
    at queryAllByAttribute (https://4njet.csb.app/node_modules/@testing-library/dom/dist/query-helpers.js:41:67)
    at queryAllByTestId (https://4njet.csb.app/node_modules/@testing-library/dom/dist/queries/test-id.js:12:73)
    at eval (https://4njet.csb.app/node_modules/@testing-library/dom/dist/query-helpers.js:73:17)
    at eval (https://4njet.csb.app/node_modules/@testing-library/dom/dist/query-helpers.js:86:105)
    at MutationObserverImpl.onMutation [as _callback] (https://4njet.csb.app/node_modules/@testing-library/dom/dist/wait-for-element.js:46:24)
    at notifyMutationObservers (https://4njet.csb.app/static/js/jsdom-4.0.0.min.js:1:2304010)
    at https://4njet.csb.app/static/js/jsdom-4.0.0.min.js:1:2303453

Reproduction:

https://codesandbox.io/s/react-testing-library-issue-4njet

Problem description:

Again, using a custom renderer the methods returned by render are throwing errors. Although my primary focus was the matchers I also observed issues when using debug from the destructured results render provides.

const { findAllByTestId, container, debug } = render(<Users />)

If you instead import the matcher methods from the testing-utils.js custom renderer directly this does NOT happen.

import { render, findAllByTestId } from "../testing-utils"

Suggested solution:

Not sure as to the cause, but I'm wondering if this is expected behavior? If so then maybe a simple update to the examples provided in the Setup section of the documentation would be sufficient. Thanks!

[kentcdodds]

Here's the fixed version: https://codesandbox.io/s/react-testing-library-issue-qmzxz

The confusion is the fact that the queries that come back from render are pre-bound to the container.

Good luck!

[jaredmeakin]

Thanks for the clarification, really appreciate it! Is worth calling out here: https://testing-library.com/docs/react-testing-library/setup#custom-render

It wasn't immediately apparent to me from the docs that this is the behavior. Or did I miss this somewhere else in the docs? Just trying to help future people out. Thanks again!

[hongkheng]

I know this issue has closed, but I need to comment here in case people are confused when they happened to discover this.

From the codesandbox example,

const card = await findAllByTestId(container, "card")

Omitting container will make it work.

const cards = await findAllByTestId("card")