javascript - React Unit-Testing - 在“Connect（Connect（AddUserProfile））”的上下文中找不到“store”
问题描述
我尝试构建一个简单的组件，该组件将弹出以允许用户创建一个新的帐户，如下所示。
新帐户.jsx
import React from 'react';
import {
Button, Modal, ModalHeader, ModalBody, ModalFooter,
} from 'reactstrap';
import UserProfile from '../UserProfile/AddNewUserProfile';
import { useHistory } from 'react-router-dom';
const NewAccount = React.memo((props) => {
const closePopup = (e) => { props.onUserPopupClose(); };
const history = useHistory()
const userCreated = () => {
props.userCreated();
}
return (
<Modal isOpen={props.open} toggle={closePopup} className={"modal-dialog modal-lg"}>
<ModalHeader toggle={closePopup}>New User</ModalHeader>
<ModalBody>
<UserProfile isAddNewUser={true} history={history} userCreated={userCreated} />
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={closePopup}>Close</Button>
</ModalFooter>
</Modal>
);
});
export default NewAccount;
这是我的 NewAccount.test.js 只是为了测试它是否呈现模式。
import React from 'react';
import { screen, render, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import NewAccount from '../../components/UserManagement/NewAccount';
jest.mock('../../components/UserProfile', () => {
const userprofile = () => <div><h4>User Profile</h4></div>;
return userprofile;
});
describe('new user popup', () => {
const userCreated = jest.fn();
const onUserPopupClose = jest.fn();
beforeEach(() => {
render(<NewAccount
open
onUserPopupClose={onUserPopupClose}
userCreated={userCreated}/>);
});
describe('Structure', () => {
it('should render the modal', () => {
expect(screen.getByRole('dialog')).toBeInTheDocument();
});
});
});
这是我得到的错误
FAIL src/__tests__/UserManagement/NewAccount.test.js
Stop Error
✓ should not error out due to no tests (popper.js.js) (2ms)
new user popup
Structure
✕ should render the modal (111ms)
● new user popup › Structure › should render the modal
Could not find "store" in the context of "Connect(Connect(AddUserProfile))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Connect(AddUserProfile)) in connect options.
12 | const onUserPopupClose = jest.fn();
13 | beforeEach(() => {
> 14 | render(<NewAccount
| ^
15 | open
16 | onUserPopupClose={onUserPopupClose}
17 | userCreated={userCreated}/>);
at ConnectFunction (node_modules/react-redux/lib/components/connectAdvanced.js:259:15)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:17034:20)
at updateSimpleMemoComponent (node_modules/react-dom/cjs/react-dom.development.js:16972:10)
at updateMemoComponent (node_modules/react-dom/cjs/react-dom.development.js:16861:14)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18682:16)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188: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:318: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:237:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
at node_modules/react-dom/cjs/react-dom.development.js:11089:24
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11039:10)
at flushSyncCallbackQueueImpl (node_modules/react-dom/cjs/react-dom.development.js:11084:7)
at flushSyncCallbackQueue (node_modules/react-dom/cjs/react-dom.development.js:11072:3)
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21862:7)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
at render (node_modules/@testing-library/react/dist/pure.js:96:26)
at Object.<anonymous> (src/__tests__/UserManagement/NewAccount.test.js:14:5)
● new user popup › Structure › should render the modal
TestingLibraryElementError: Unable to find an accessible element with the role "dialog"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
<body
class=""
>
<div />
</body>
19 | describe('Structure', () => {
20 | it('should render the modal', () => {
> 21 | expect(screen.getByRole('dialog')).toBeInTheDocument();
| ^
22 | });
23 | });
24 | });
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:92:38
at node_modules/@testing-library/dom/dist/query-helpers.js:64:17
at getByRole (node_modules/@testing-library/dom/dist/query-helpers.js:108:19)
at Object.<anonymous> (src/__tests__/UserManagement/NewAccount.test.js:21:21)
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Could not find "store" in the context of "Connect(Connect(AddUserProfile))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Connect(AddUserProfile)) in connect options.]
at reportException (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:237:16)
at invokeGuardedCallback (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:292:31)
at beginWork$1 (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
at performUnitOfWork (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:22157:12) Error: Could not find "store" in the context of "Connect(Connect(AddUserProfile))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Connect(AddUserProfile)) in connect options.
at ConnectFunction (/home/user1/WebApplication/webapp1/node_modules/react-redux/lib/components/connectAdvanced.js:259:15)
at renderWithHooks (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:14803:18)
at updateFunctionComponent (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:17034:20)
at updateSimpleMemoComponent (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:16972:10)
at updateMemoComponent (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:16861:14)
at beginWork (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:18682:16)
at HTMLUnknownElement.callCallback (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:188:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/user1/WebApplication/webapp1/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:237:16)
at invokeGuardedCallback (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:292:31)
at beginWork$1 (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
at performUnitOfWork (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:22157:12)
at workLoopSync (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:22130:22)
at performSyncWorkOnRoot (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:21756:9)
at /home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:11089:24
at unstable_runWithPriority (/home/user1/WebApplication/webapp1/node_modules/scheduler/cjs/scheduler.development.js:653:12)
at runWithPriority$1 (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
at flushSyncCallbackQueueImpl (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:11084:7)
at flushSyncCallbackQueue (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:11072:3)
at batchedUpdates$1 (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom.development.js:21862:7)
at act (/home/user1/WebApplication/webapp1/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
at render (/home/user1/WebApplication/webapp1/node_modules/@testing-library/react/dist/pure.js:96:26)
at Object.<anonymous> (/home/user1/WebApplication/webapp1/src/__tests__/UserManagement/NewAccount.test.js:14:5)
at Object.asyncJestLifecycle (/home/user1/WebApplication/webapp1/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
at /home/user1/WebApplication/webapp1/node_modules/jest-jasmine2/build/queueRunner.js:43:12
at new Promise (<anonymous>)
at mapper (/home/user1/WebApplication/webapp1/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
at /home/user1/WebApplication/webapp1/node_modules/jest-jasmine2/build/queueRunner.js:73:41
console.error node_modules/react-dom/cjs/react-dom.development.js:19527
The above error occurred in the <ConnectFunction> component:
in ConnectFunction (at NewAccount.jsx:26)
in div (created by ModalBody)
in ModalBody (at NewAccount.jsx:25)
in div (created by Modal)
in div (created by Modal)
in div (created by Transition)
in Transition (created by Fade)
in Fade (created by Modal)
in div (created by Modal)
in Portal (created by Modal)
in Modal (at NewAccount.jsx:23)
in Unknown (at NewAccount.test.js:14)
Consider adding an error boundary to your tree to customize error handling behavior.
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 3.745s, estimated 4s
我是单元测试的新手......所以我不知道我在这里做错了什么:(。我已经尝试谷歌几个小时，但我仍然无法弄清楚这有什么问题。
另外，如果你们有一些关于如何像我一样为 React.js 新手进行单元测试的视频/文章/文档，请随时与我分享:(
解决方案
推荐阅读
- mysql - mysql查询结果导出到csv文件的问题
- angular - Angular 6 和 Polyfills.ts
- python - 使用 Cartopy 和 Matplotlib 获取 xticks 和 yticks 值的正确方法是什么？
- ruby-on-rails - Rails/Sidekiq 在无法识别的模块中工作失败
- python - Python - 点文件到png文件未找到错误
- c - 如何获取堆内存使用情况，FreeRTOS
- asp.net-web-api - 使用多个 web api 端点（相同）
- selenium - 如何使用硒验证下拉列表中的动态网页内容？
- android - 通过信标通知 Playstore
- sql - 如何将多个表读取为单个表