AdvancedReduxCode
AdvancedReduxCode copied to clipboard
Published
20 hours ago •
StephenGrider
StephenGrider
tests failed for /testing code
I recently enrolled in the Advanced React and Redux 2018 course, and tried to run the sample code. But 6 of the tests are failing.
I have attached the error log below, it's very verbose. I assume one can reproduce it easily instead.
Steps to reproduce:
- Clone this repo
- Naviagte to the
/testingfolder - run
npm install - run
npm test
Full error message (sorry ><)
FAIL src/tests/integrations.test.js ● Console
console.error node_modules/fbjs/lib/warning.js:33
Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
in Link (at App.js:25)
in li (at App.js:24)
in ul (at App.js:23)
in div (at App.js:37)
in App (created by Connect(App))
in Connect(App) (at integrations.test.js:22)
in Provider (at Root.js:14)
in Unknown (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:9643
The above error occurred in the <Route> component:
in Route (at App.js:40)
in div (at App.js:37)
in App (created by Connect(App))
in Connect(App) (at integrations.test.js:22)
in Provider (at Root.js:14)
in Unknown (created by WrapperComponent)
in WrapperComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
● can fetch a list of comments and display them
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
at invariant (node_modules/invariant/invariant.js:40:15)
at Route.computeMatch (node_modules/react-router/Route.js:81:29)
at new Route (node_modules/react-router/Route.js:56:20)
at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:6801:20)
at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8336:9)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8982:16)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:11814:16)
at workLoop (node_modules/react-dom/cjs/react-dom.development.js:11843:26)
at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:11874:9)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12449:24)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:9)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:12347:5)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:12247:7)
at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:12122:13)
at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:12082:12)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:12710:5)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:12738:12)
at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:12765:14)
at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:16069:15)
at node_modules/react-dom/cjs/react-dom.development.js:16488:14
at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:12557:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:16484:17)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:16543:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Object.<anonymous>.done (src/__tests__/integrations.test.js:20:37)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at process._tickCallback (internal/process/next_tick.js:68:7)
FAIL src/components/tests/App.test.js ● shows a comment box
Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
at invariant (node_modules/invariant/invariant.js:40:15)
at new Connect (node_modules/react-redux/lib/components/connectAdvanced.js:134:33)
at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:123:26)
at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:287:35
at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:94:16)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:286:68)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:119:22)
at shallow (node_modules/enzyme/build/shallow.js:19:10)
at Object.<anonymous>.beforeEach (src/components/__tests__/App.test.js:10:33)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● shows a comment box
TypeError: Cannot read property 'find' of undefined
at Object.<anonymous>.it (src/components/__tests__/App.test.js:14:18)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● shows a comment list
Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
at invariant (node_modules/invariant/invariant.js:40:15)
at new Connect (node_modules/react-redux/lib/components/connectAdvanced.js:134:33)
at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:123:26)
at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:287:35
at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:94:16)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:286:68)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:119:22)
at shallow (node_modules/enzyme/build/shallow.js:19:10)
at Object.<anonymous>.beforeEach (src/components/__tests__/App.test.js:10:33)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● shows a comment list
TypeError: Cannot read property 'find' of undefined
at Object.<anonymous>.it (src/components/__tests__/App.test.js:18:18)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
FAIL src/components/tests/CommentBox.test.js ● Console
console.error node_modules/react-dom/cjs/react-dom.development.js:9643
The above error occurred in the <ComposedComponent> component:
in ComposedComponent (created by Connect(ComposedComponent))
in Connect(ComposedComponent) (created by Connect(Connect(ComposedComponent)))
in Connect(Connect(ComposedComponent)) (at CommentBox.test.js:11)
in Provider (at Root.js:14)
in Unknown (created by WrapperComponent)
in WrapperComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.error node_modules/react-dom/cjs/react-dom.development.js:9643
The above error occurred in the <ComposedComponent> component:
in ComposedComponent (created by Connect(ComposedComponent))
in Connect(ComposedComponent) (created by Connect(Connect(ComposedComponent)))
in Connect(Connect(ComposedComponent)) (at CommentBox.test.js:11)
in Provider (at Root.js:14)
in Unknown (created by WrapperComponent)
in WrapperComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.error node_modules/react-dom/cjs/react-dom.development.js:9643
The above error occurred in the <ComposedComponent> component:
in ComposedComponent (created by Connect(ComposedComponent))
in Connect(ComposedComponent) (created by Connect(Connect(ComposedComponent)))
in Connect(Connect(ComposedComponent)) (at CommentBox.test.js:11)
in Provider (at Root.js:14)
in Unknown (created by WrapperComponent)
in WrapperComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
● has a text area and two buttons
TypeError: Cannot read property 'push' of undefined
at ComposedComponent.shouldNavigateAway (src/components/requireAuth.js:18:28)
at ComposedComponent.componentDidMount (src/components/requireAuth.js:8:12)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:9784:26)
at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:11455:9)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:100:14)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:138:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:187:29)
at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:11594:9)
at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:12502:36)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12452:11)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:9)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:12347:5)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:12247:7)
at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:12122:13)
at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:12082:12)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:12710:5)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:12738:12)
at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:12765:14)
at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:16069:15)
at node_modules/react-dom/cjs/react-dom.development.js:16488:14
at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:12557:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:16484:17)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:16543:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Object.<anonymous>.beforeEach (src/components/__tests__/CommentBox.test.js:9:31)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● has a text area and two buttons
TypeError: Cannot read property 'find' of undefined
at Object.<anonymous>.it (src/components/__tests__/CommentBox.test.js:21:18)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● has a text area and two buttons
TypeError: Cannot read property 'unmount' of undefined
at Object.<anonymous>.afterEach (src/components/__tests__/CommentBox.test.js:17:11)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › has a text area that users can type in
TypeError: Cannot read property 'push' of undefined
at ComposedComponent.shouldNavigateAway (src/components/requireAuth.js:18:28)
at ComposedComponent.componentDidMount (src/components/requireAuth.js:8:12)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:9784:26)
at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:11455:9)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:100:14)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:138:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:187:29)
at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:11594:9)
at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:12502:36)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12452:11)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:9)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:12347:5)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:12247:7)
at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:12122:13)
at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:12082:12)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:12710:5)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:12738:12)
at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:12765:14)
at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:16069:15)
at node_modules/react-dom/cjs/react-dom.development.js:16488:14
at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:12557:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:16484:17)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:16543:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Object.<anonymous>.beforeEach (src/components/__tests__/CommentBox.test.js:9:31)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › has a text area that users can type in
TypeError: Cannot read property 'find' of undefined
at Object.beforeEach (src/components/__tests__/CommentBox.test.js:27:13)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › has a text area that users can type in
TypeError: Cannot read property 'find' of undefined
at Object.it (src/components/__tests__/CommentBox.test.js:34:20)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › has a text area that users can type in
TypeError: Cannot read property 'unmount' of undefined
at Object.<anonymous>.afterEach (src/components/__tests__/CommentBox.test.js:17:11)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › when form is submitted, text area gets emptied
TypeError: Cannot read property 'push' of undefined
at ComposedComponent.shouldNavigateAway (src/components/requireAuth.js:18:28)
at ComposedComponent.componentDidMount (src/components/requireAuth.js:8:12)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:9784:26)
at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:11455:9)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:100:14)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:138:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:187:29)
at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:11594:9)
at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:12502:36)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12452:11)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:9)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:12347:5)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:12247:7)
at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:12122:13)
at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:12082:12)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:12710:5)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:12738:12)
at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:12765:14)
at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:16069:15)
at node_modules/react-dom/cjs/react-dom.development.js:16488:14
at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:12557:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:16484:17)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:16543:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Object.<anonymous>.beforeEach (src/components/__tests__/CommentBox.test.js:9:31)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › when form is submitted, text area gets emptied
TypeError: Cannot read property 'find' of undefined
at Object.beforeEach (src/components/__tests__/CommentBox.test.js:27:13)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › when form is submitted, text area gets emptied
TypeError: Cannot read property 'find' of undefined
at Object.it (src/components/__tests__/CommentBox.test.js:38:13)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
● the text area › when form is submitted, text area gets emptied
TypeError: Cannot read property 'unmount' of undefined
at Object.<anonymous>.afterEach (src/components/__tests__/CommentBox.test.js:17:11)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
@cptiwari20 As I said in the description, I did not modify any code. It's cloned from this course repo.
Yes, I get it. This is happening because, in the course Stephen added the test before adding the HOC and Middlewares. As after this Stephen did not added the test for these components, therefore these tests are not running properly..
For understanding this more clearly, I will recommend that you should go through the course.
@cptiwari20 agreed, but your's also failing https://github.com/cptiwari20/Advance-react-project, similar to this fashion.
@cptiwari20 agreed, but your's also failing https://github.com/cptiwari20/Advance-react-project, similar to this fashion.
I followed the course, that's why it is failing.
@lakshmaji I did not dig into it anymore. But it's likely that the tested component requires certain props that are provided by the app context under the hood, and are not provided in the tests.
For example, it might call for the history or match props which are provided by React-Router or some action creators by React-Redux. These props can be passed down from the parent components. In our tests, it's tested individually, thus lost access to these props.
To solve this, we either provide the exact same context. For example, for React-Router related component, we can wrap the component with a <Router> when creating the wrapper and then .dive() once more. In this way, we are still accessing the component while having access to props like history and match. For Redux related component, we can create a Redux store and pass it as props to our component when creating the test wrapper:
# create yourStore first
const wrapper = shallow(<YourComponent store={yourStore} />);
Alternatively, which I personally use more often, is to provide a mocked context. For example, we can simply pass a mocked history and mocked match object, just a plain JS object containing the props you need, and pass it to your testing component. For example:
const mockedHistory = {
push: jest.fn(),
listen: jest.fn(),
};
wrapper = shallow(<YourComponent history={mockedHistory} />);
Same for Redux, I often use mock-redux-store to create a lightweight mocked store and make it happen for my tests.
@cptiwari20 It would be nice to have a working example for new students at the start since it can be confusing. The course is of great quality (as always), but it doesn't justify the error in this repo. And it's not a good idea to blame the students not finish the course. However, I understand that keeping track of the new changes can be difficult. What I would suggest is to use separate folders for each section. It's easier to keep things in sync this way.
Cheers.