Client failures (1)

gistfile1.txt

 

 FAIL  src/draftlingpage/DraftlingPage.test.js      
  ● Console

    console.log src/draftlingpage/DraftlingPage.js:86
      undefined
    console.log src/draftlingpage/DraftlingPage.js:87
      [] draftlings
    console.log src/draftlingpage/DraftlingPage.js:89
      [] undefined draftlings, selectedDraftling
    console.log src/draftlingpage/DraftlingPage.js:17
      DraftlingPage mounted!
    console.log src/draftlingpage/DraftlingPage.js:18
      {}

  ● DraftlingPage component › renders a .DraftlingPage by default

    TypeError: this.context.fetchTemplateCritiques is not a function

      17 |     console.log('DraftlingPage mounted!')
      18 |     console.log(this.context)
    > 19 |     this.context.fetchTemplateCritiques();
         |                  ^
      20 |     this.context.fetchFreeformCritiques();
      21 |   }
      22 | 

      at DraftlingPage.componentDidMount (src/draftlingpage/DraftlingPage.js:19:18)
      at fn (node_modules/enzyme/src/ShallowWrapper.js:429:22)
      at Object.batchedUpdates (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:722:16)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:428:26)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at Object.<anonymous> (src/draftlingpage/DraftlingPage.test.js:8:25)
      
      
      Great! I am still working on the context. Enzyme has its own ways of dealing with context, but they don't seem to be working. I think I need to add something to the base component, but I don't fully understand it yet

Based on my research, enzyme does not currently support modern React context. You have a few options. You can try using an NPM module like this one to use Enzyme with context for shallow rendering: https://www.npmjs.com/package/shallow-with-context

Or you can do non-shallow rendering instead, and wrap the DraftlingPage component in an ApiContext.Provider component: https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/mount.html

I am out of time for today, but the next coach can take a look if you still have questions. Good luck!!

Angela07:11 PM
ok thank you for all your help

Thinkful07:12 PM
Looks like the expert is not available or is not able to help you at the moment. We will connect you to a different expert shortly. All of your chat information will be shared with your new expert so you don't have to start over.

Rick L.07:13 PM
Hi Angela. Let me get caught up here.

Seems like it might be resolved?

Angela07:14 PM
Hi Rick, ok thank you. I'm working on this last issue: https://gist.github.com/amrvitale/10eb49c51cb0977094be64b5f8be8f41

so...how do I wrap a single component in ApiContextProvider like Mike suggested?

Rick L.07:18 PM
Can you send me the link to your github?

Angela07:18 PM
this is the code for the component: https://github.com/amrvitale/draftling-capstone/blob/master/src/draftlingpage/DraftlingPage.js

Rick L.07:20 PM
Show me where you define your Context

Angela07:21 PM
https://github.com/amrvitale/draftling-capstone/blob/master/src/ApiContext.js

Rick L.07:21 PM
https://github.com/ricklopez/faq-react-context-student/tree/master/src

here is a simple example. Look at the Localecontext

That's what he's talking about

Angela07:25 PM
so...does it need an actual different component/

Rick L.07:26 PM
That's a good clean way to do it.

It will make all the data you are getting undefined errors for available throughout your app.

I have 3 other chats in the queue. Do you mind if I give you some time to look over that example and close this chat out? You can start a new chat if you still need more help.

Angela07:28 PM
Ok

Rick L.07:29 PM
Thanks. Please reach out if it's still not making sense. I'll look at your code after the next chats.