search

vitest-dev / vitest

Next generation testing framework powered by Vite.
https://vitest.dev
MIT License
12.32k stars 1.09k forks source link

Changing import path causes component to be imported as undefined and an error occurs #3677

Open maimai880 opened 1 year ago

maimai880 commented 1 year ago

Describe the bug

App
  |-Component

With the above configuration, using @testing-library/react,

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

  it("render Component", () => {
    render(<Component/>)
  })

  it("render App", () => {
    render(<App/>) // Component becomes undefined here
  })
})

Running the above test will result in an error However, if you skip "render Component" or change the import path of Component, the test will work correctly. Component is imported using index.ts, so it is possible that the error occurs there.

However, if we remove the use of jotai's atom in Component, the test works fine. It is possible that the error is caused by jotai.

ERROR: 

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 App.tsx:4.
at App
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 App.tsx:4.
at App
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 `App`.]
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 `App`.
  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 mountIndeterminateComponent (news-app\node_modules\react-dom\cjs\react-dom.development.js:20157:5)
at beginWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:21587:16)
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.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 App.tsx:4.
at App
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 App.tsx:4.
at App
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 `App`.]
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 `App`.
  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 mountIndeterminateComponent (news-app\node_modules\react-dom\cjs\react-dom.development.js:20157:5)
at beginWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:21587:16)
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 <App> component:

at App

Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

  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 `App`.
  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 mountIndeterminateComponent (news-app\node_modules\react-dom\cjs\react-dom.development.js:20157:5)
at beginWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:21587:16)
at beginWork$1 (news-app\node_modules\react-dom\cjs\react-dom.development.js:27426:14)
at performUnitOfWork (news-app\node_modules\react-dom\cjs\react-dom.development.js:26560:12)
at workLoopSync (news-app\node_modules\react-dom\cjs\react-dom.development.js:26466:5)

Reproduction

https://github.com/maimai880/news-app/tree/issue%E6%8F%90%E5%87%BA%E7%94%A8

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 637.88 MB / 7.86 GB
  Binaries:
    Node: 19.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.58)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.0-beta.0 => 4.0.1
    vite: ^4.3.0 => 4.3.9
    vitest: ^0.32.2 => 0.32.2

Used Package Manager

npm

Validations

RSMuthu commented 3 months ago

I am facing similar error after vitest version bump