tests failed for /testing code

[CristianoYL]

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 /testing folder
• 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]

Please share your test code.

[CristianoYL]

@cptiwari20 As I said in the description, I did not modify any code. It's cloned from this course repo.

[cptiwari20]

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.

[lakshmaji]

@cptiwari20 agreed, but your's also failing https://github.com/cptiwari20/Advance-react-project, similar to this fashion.

[lakshmaji]

@CristianoYL, How did you resolve this?

[cptiwari20]

@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.

[CristianoYL]

@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.