I am trying to test App.jsx
import getUserInfo from './services/user';
const App = () => {
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState({
firstName: 'First Name',
lastName: 'Last Name',
});
useEffect(() => {
getUserInfo()
.then(({ Authorization: { FName, LName } }) => {
setUser({
firstName: FName,
lastName: LName,
});
setIsLoading(false);
})
.catch((error) => {
console.error(error);
setIsLoading(false);
});
}, []);
if (isLoading) {
return (<h1>Loading!</h1>)
} else {
return (<h1>Finished Loading!</h1>)
export default App
And user.js
const getUserInfo = async () => {
return fetch(/getInfo, {});
};
And App.test.jsx
import React from 'react'
import { render} from '@testing-library/react';
import App from '../src/App';
import getUserInfo from '../src/services/user'
jest.mock('../src/services/user', () => ({
getUserInfo: () => Promise.resolve(
{
"Authorization": {
"FName": "Test Name",
"LName": "Test Last Name"
}
}
)
}))
describe('<Loader/>', () => {
it('renders', () => {
render(<App />);
})
})
This test doesn't work though. It returns:
TypeError: (0 , _user.default) is not a function
36 |
37 | useEffect(() => {
> 38 | getUserInfo()
| ^
39 | .then(({ Authorization: { FName, LName, userid } }) => {
40 | setUser({
41 | firstName: FName,
at src/App.jsx:38:5
at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
at render (node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (tests/App.test.jsx:22:5)
console.error
Error: Uncaught [TypeError: (0 , _user.default) is not a function]
at reportException (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
at invokeEventListeners (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at flushPassiveEffectsImpl (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:23574:9)
at unstable_runWithPriority (/Users/wvn179/Documents/Kirby/my-app/node_modules/scheduler/cjs/scheduler.development.js:468:12) TypeError: (0 , _user.default) is not a function
at /Users/wvn179/Documents/Kirby/my-app/src/App.jsx:38:5
at invokePassiveEffectCreate (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:23487:20)
at HTMLUnknownElement.callCallback (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/wvn179/Documents/Kirby/my-app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at flushPassiveEffectsImpl (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:23574:9)
at unstable_runWithPriority (/Users/wvn179/Documents/Kirby/my-app/node_modules/scheduler/cjs/scheduler.development.js:468:12)
at runWithPriority$1 (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
at flushPassiveEffects (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom.development.js:23447:14)
at Object.<anonymous>.flushWork (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
at act (/Users/wvn179/Documents/Kirby/my-app/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
at render (/Users/wvn179/Documents/Kirby/my-app/node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (/Users/wvn179/Documents/Kirby/my-app/tests/App.test.jsx:22:5)
at Object.asyncJestTest (/Users/wvn179/Documents/Kirby/my-app/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
at /Users/wvn179/Documents/Kirby/my-app/node_modules/jest-jasmine2/build/queueRunner.js:45:12
at new Promise (<anonymous>)
at mapper (/Users/wvn179/Documents/Kirby/my-app/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
at /Users/wvn179/Documents/Kirby/my-app/node_modules/jest-jasmine2/build/queueRunner.js:75:41
at processTicksAndRejections (internal/process/task_queues.js:94:5)
at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
console.error
The above error occurred in the <App> component:
at App (/Users/wvn179/Documents/Kirby/my-app/src/App.jsx:30:37)
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.
at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
Why is TypeError: (0 , _user.default) is not a function occurring? The imports are correct and it is indeed a function. I've tried mocking the getUserInfo() other ways and it still fails. What is wrong here? I'm thinking it has something to do with useEffect because on removal, the test works and <App/> renders.
CodePudding user response：
It seems that the import statement somewhere in your file is incorrect. (Based on this issue)
I think you should wrap getUserInfo with curly brackets.
// fails
import getUserInfo from ..
// correct
import { getUserInfo } from ...
CodePudding user response：
You are mocking for a named export inside ../src/services/user instead of the default export Try:
jest.mock('../src/services/user', () => Promise.resolve(
{
"Authorization": {
FName": "Test Name",
"LName": "Test Last Name"
}
}
))