我正在嘗試測驗 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
和 user.js
const getUserInfo = async () => {
return fetch(/getInfo, {});
};
和 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 />);
})
})
但是這個測驗不起作用。它回傳：
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)
為什么會TypeError: (0 , _user.default) is not a function發生？匯入是正確的，它確實是一個函式。我試過以其他方式嘲笑 getUserInfo() 但它仍然失敗。這里有什么問題？我認為這與它useEffect有關，因為在移除時，測驗作業并<App/>呈現。
uj5u.com熱心網友回復：
檔案中某處的匯入陳述句似乎不正確。（基于這個問題）
我認為您應該用大括號將 getUserInfo 包裝起來。
// fails
import getUserInfo from ..
// correct
import { getUserInfo } from ...
uj5u.com熱心網友回復：
您正在模擬../src/services/userTry 中的命名匯出：
jest.mock('../src/services/user', () => Promise.resolve(
{
"Authorization": {
FName": "Test Name",
"LName": "Test Last Name"
}
}
))
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343812.html
標籤：javascript 反应 玩笑 使用效果