Bug: Unit testing error message - "The tag <search> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."

[IsaacMcIntyre]

React version: 19

Steps To Reproduce

If using my linked example:

1. Create component that uses the search component
2. Create a unit test that renders this
3. Run the test

Link to code example: https://github.com/IsaacMcIntyre/search-tag-testing-bug

The current behavior

Test runs with no errors

The expected behavior

Test passes, but with console error:

console.error
   The tag <search> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

     4 | describe("SearchComponent", () => {
     5 |   it("renders", () => {
   > 6 |     render(<SearchComponent />)
       |           ^
     7 |   })
     8 | }) 

     at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11360:37)
     at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)
     at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)
     at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)
     at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)
     at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)
     at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)
     at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
     at flushActQueue (node_modules/react/cjs/react.development.js:566:34)
     at Object.<anonymous>.process.env.NODE_ENV.exports.act (node_modules/react/cjs/react.development.js:859:10)
     at node_modules/@testing-library/react/dist/act-compat.js:47:25
     at renderRoot (node_modules/@testing-library/react/dist/pure.js:190:26)
     at render (node_modules/@testing-library/react/dist/pure.js:292:10)
     at Object.<anonymous> (src/components/__tests__/SearchComponent.test.tsx:6:11)

PASS  src/components/__tests__/SearchComponent.test.tsx
 SearchComponent
   ✓ renders (35 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total

Other Context

I've seen similar issues written in the past for and where they are not inside an tag, but from my understanding there should not be any requirements of elements outside or inside the search tag. With this being a relatively new html element, I'm wondering if this is just something that needs updating? Or am I doing something wrong?

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search
• <g> or <text> are unrecognized in Jest #16135
• <g> or <text> are unrecognized in Jest #16135 (comment)

Apologies if this is the wrong place / I have misunderstood something.

Thanks!

[sophiebits]

This is something that needs to be fixed in jsdom (hence "this browser" — or maybe it has been fixed and you need to upgrade). From Chrome 136:

Object.prototype.toString.call(document.createElement('div'))
'[object HTMLDivElement]'
Object.prototype.toString.call(document.createElement('search'))
'[object HTMLElement]'
Object.prototype.toString.call(document.createElement('nonexistent'))
'[object HTMLUnknownElement]'

[bertearazvan]

If you're using jsdom here is an issue, and a fix patch you can apply: jsdom/jsdom#3882