Certain imported components are undefined only when tests are run.

[maimai880]

• @testing-library/react version: 14.0.0
• Testing Framework and version: vitest(0.32.2)
• DOM Environment: jsdom(22.1.0)

Relevant code or config:

describe("SearchBar", () => {
  afterEach(cleanup)

  it("Rendered correctly", () => {
    render(<SearchBar/>, {wrapper: AppProvider})

    expect(screen.getByTestId("SearchBar")).toBeInTheDocument()
    expect(screen.getByTestId("SearchBar.TextField")).toBeInTheDocument()
    expect(screen.getByRole("button")).toBeInTheDocument()
  })

  describe("Submitted when the enter key is pressed and when the search button is pressed.", () => {
    it("Submitted when the enter key is pressed.", () => {
      mockedAxios.get.mockResolvedValueOnce(MOCK_RESPONSE)

      render(<App/>) // Here, the component called SearchBar becomes undefined.
      const input = screen.getByTestId("SearchBar.TextField")

      fireEvent.change(input, {target: {value: "test"}})
      fireEvent.keyDown(input, {key: "Enter"})

      expect(mockedAxios.get).toHaveBeenCalledWith("https://gnews.io/api/v4/top-headlines", expect.anything())
    })
  })
})

import {AppBar, Box, IconButton, Toolbar, Typography, useMediaQuery} from "@mui/material"
import {FC, useState} from "react"
import {SearchBar} from "@/features/article"
import {CountrySelector} from "@/features/language"
import {theme} from "@/theme.ts"
import SearchIcon from "@mui/icons-material/Search"
import {SearchHeader} from "@/components/Header/SearchHeader.tsx"

export const Header: FC = () => {
  const useMiniButton = useMediaQuery(() => theme.breakpoints.down("lg"))
  const isSmartPhone = useMediaQuery("(max-width:499px)")

  const [showSearchHeader, setShowSearchHeader] = useState(false)
  const handleSearch = () => {
    setShowSearchHeader(true)
  }
  const handleBack = () => {
    setShowSearchHeader(false)
  }

  return (
    <AppBar
      position="sticky"
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        p: {xs: 0.5, lg: 2},
        width: "100%",
        height: {xs: 72, lg: 102},
        bgcolor: "white",
        overflow: "hidden",
      }}
    >
      {
        isSmartPhone && showSearchHeader ?
          <SearchHeader handleBack={handleBack}/> :
          <Toolbar sx={{position: "static", px: 0, width: "100%", maxWidth: {xs: 850, sm: 650, lg: 700}}}>
            <Typography
              variant="h1"
              color="primary.main"
              sx={{
                mr: !isSmartPhone ? {xs: 6, lg: 5} : "auto",
                ml: {xs: 1, sm: 0},
                fontSize: {xs: "21px", lg: "30px"},
                fontFamily: "BlinkMacSystemFont,\"Segoe UI\"",
                fontWeight: "bold",
                textAlign: "center"
              }}
            >
              NEWS<br/>APP
            </Typography>

            {
              !isSmartPhone ?
                <Box sx={{mr: 3, width: "100%", maxWidth: 500}}>
                  <SearchBar/>
                </Box> :
                <IconButton color="primary" onClick={handleSearch} sx={{mr: 1}}>
                  <SearchIcon sx={{width: "auto", height: 40,}}/>
                </IconButton>
            }

            <Box sx={{
              position: {xs: "static", sm: "absolute"},
              right: 30,
              ml: !isSmartPhone ? "auto" : 0,
              pr: {xs: 2.5, sm: "unset"}
            }}>
              <CountrySelector miniButton={useMiniButton}/>
            </Box>
          </Toolbar>
      }
    </AppBar>
  )
}

What you did:

I tried to render and test the component

What happened:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Header.tsx:58.
at Header (news-app\src\components\Header\Header.tsx:18:47)
at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Box (news-app\node_modules\@mui\system\createBox.js:30:41)
at QueryClientProvider (news-app\node_modules\react-query\lib\react\QueryClientProvider.js:45:21)
at ErrorBoundary (news-app\node_modules\react-error-boundary\dist\react-error-boundary.esm.js:14:5)
at Suspense
at ThemeProvider (news-app\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:41:5)
at ThemeProvider (news-app\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:49:5)
at ThemeProvider (news-app\node_modules\@mui\material\node\styles\ThemeProvider.js:20:14)
at AppProvider (news-app\src\providers\app.tsx:34:294)
at App (news-app\src\App.tsx:16:39)
Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Header`.]
at reportException (news-app\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
at innerInvokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:353:9)
at invokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl._dispatch (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:104:17)
at HTMLUnknownElement.dispatchEvent (news-app\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (news-app\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
at invokeGuardedCallback (news-app\node_modules\react-dom\cjs\react-dom.development.js:4277:31)
at beginWork$1 (news-app\node_modules\react-dom\cjs\react-dom.development.js:27451:7)
at performUnitOfWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:26560:12) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Header`.
  at createFiberFromTypeAndProps (news-app\node_modules\react-dom\cjs\react-dom.development.js:28439:17)
at createFiberFromElement (news-app\node_modules\react-dom\cjs\react-dom.development.js:28465:15)
at reconcileSingleElement (news-app\node_modules\react-dom\cjs\react-dom.development.js:15750:23)
at reconcileChildFibers (news-app\node_modules\react-dom\cjs\react-dom.development.js:15808:35)
at reconcileChildren (news-app\node_modules\react-dom\cjs\react-dom.development.js:19167:28)
at updateHostComponent (news-app\node_modules\react-dom\cjs\react-dom.development.js:19924:3)
at beginWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback (news-app\node_modules\react-dom\cjs\react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (news-app\node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30)
at innerInvokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:350:25)
Warning: React does not recognize the `showLabel` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showlabel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  at p
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Typography (news-app\node_modules\@mui\material\node\Typography\Typography.js:89:49)
at footer
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at BottomNavigation (news-app\node_modules\@mui\material\node\BottomNavigation\BottomNavigation.js:44:44)
at Footer
at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Box (news-app\node_modules\@mui\system\createBox.js:30:41)
at QueryClientProvider (news-app\node_modules\react-query\lib\react\QueryClientProvider.js:45:21)
at ErrorBoundary (news-app\node_modules\react-error-boundary\dist\react-error-boundary.esm.js:14:5)
at Suspense
at ThemeProvider (news-app\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:41:5)
at ThemeProvider (news-app\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:49:5)
at ThemeProvider (news-app\node_modules\@mui\material\node\styles\ThemeProvider.js:20:14)
at AppProvider (news-app\src\providers\app.tsx:34:294)
at App (news-app\src\App.tsx:16:39)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Header.tsx:58.
at Header (news-app\src\components\Header\Header.tsx:18:47)
at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Box (news-app\node_modules\@mui\system\createBox.js:30:41)
at QueryClientProvider (news-app\node_modules\react-query\lib\react\QueryClientProvider.js:45:21)
at ErrorBoundary (news-app\node_modules\react-error-boundary\dist\react-error-boundary.esm.js:14:5)
at Suspense
at ThemeProvider (news-app\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:41:5)
at ThemeProvider (news-app\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:49:5)
at ThemeProvider (news-app\node_modules\@mui\material\node\styles\ThemeProvider.js:20:14)
at AppProvider (news-app\src\providers\app.tsx:34:294)
at App (news-app\src\App.tsx:16:39)
Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Header`.]
at reportException (news-app\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
at innerInvokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:353:9)
at invokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl._dispatch (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:104:17)
at HTMLUnknownElement.dispatchEvent (news-app\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (news-app\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
at invokeGuardedCallback (news-app\node_modules\react-dom\cjs\react-dom.development.js:4277:31)
at beginWork$1 (news-app\node_modules\react-dom\cjs\react-dom.development.js:27451:7)
at performUnitOfWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:26560:12) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Header`.
  at createFiberFromTypeAndProps (news-app\node_modules\react-dom\cjs\react-dom.development.js:28439:17)
at createFiberFromElement (news-app\node_modules\react-dom\cjs\react-dom.development.js:28465:15)
at reconcileSingleElement (news-app\node_modules\react-dom\cjs\react-dom.development.js:15750:23)
at reconcileChildFibers (news-app\node_modules\react-dom\cjs\react-dom.development.js:15808:35)
at reconcileChildren (news-app\node_modules\react-dom\cjs\react-dom.development.js:19167:28)
at updateHostComponent (news-app\node_modules\react-dom\cjs\react-dom.development.js:19924:3)
at beginWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback (news-app\node_modules\react-dom\cjs\react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (news-app\node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30)
at innerInvokeEventListeners (news-app\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:350:25)
The above error occurred in the <div> component:

at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Box (news-app\node_modules\@mui\system\createBox.js:30:41)
at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Toolbar (news-app\node_modules\@mui\material\node\Toolbar\Toolbar.js:62:44)
at header
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Paper (news-app\node_modules\@mui\material\node\Paper\Paper.js:68:44)
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at AppBar (news-app\node_modules\@mui\material\node\AppBar\AppBar.js:118:44)
at Header (news-app\src\components\Header\Header.tsx:18:47)
at div
at news-app\node_modules\@emotion\react\dist\emotion-element-48d2c2e4.cjs.dev.js:62:23
at Box (news-app\node_modules\@mui\system\createBox.js:30:41)
at QueryClientProvider (news-app\node_modules\react-query\lib\react\QueryClientProvider.js:45:21)
at ErrorBoundary (news-app\node_modules\react-error-boundary\dist\react-error-boundary.esm.js:14:5)
at Suspense
at ThemeProvider (news-app\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:41:5)
at ThemeProvider (news-app\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:49:5)
at ThemeProvider (news-app\node_modules\@mui\material\node\styles\ThemeProvider.js:20:14)
at AppProvider (news-app\src\providers\app.tsx:34:294)
at App (news-app\src\App.tsx:16:39)

Reproduction:

Since we have no idea what is causing the error, we will put the link to the repository where the error occurred as it is. Our apologies.
link: https://github.com/maimai880/news-app

Problem description:

Test cannot proceed because rendering is not working.

Suggested solution:

Maybe it is a vite or vitest issue. In that case, my apologies.

[PsySolix]

Bumping this... Have the same issue

[eps1lon]

Sorry to hear you're having trouble. This doesn't sound like an issue with @testing-library/react per-se but rather with your testing framework and ES modules vs CommonJS.

I recommend you check out our community discord and see if someone is able to help you.