wrapper for testHook

[danielkcz]

What:

Implementation of #293 based on discussion in #283.

Why:

To allow specifying a wrapper component tree around the testHook tree.

  testHook(callback, {
    wrapper: props => (
      <NameContext.Provider value={nameValue}>
        <OtherContext.Provider value={otherValue} {...props} />
      </NameContext.Provider>
    )
  })

Checklist:

• Documentation (N/A?)
• Tests
• Typescript definitions updated
• Ready to be merged
  
• Added myself to contributors table
  

I am not too happy about spreading props there. In simple cases of a one Provider it's fine, but in the example above it might be confusing what you are supposed to do there.

[kentcdodds]

This looks good to me 👍

[kentcdodds]

Maybe the examples can just destructure children instead of spreading all the props. Children is all that's needed right?

[danielkcz]

Maybe the examples can just destructure children instead of spreading all the props. Children is all that's needed right?

It's a bit bulkier this way, but I guess there is no other more graceful way without introducing extra complexity.

  testHook(callback, {
    wrapper: ({ children }) => (
      <NameContext.Provider value={nameValue}>
        <OtherContext.Provider value={otherValue}>
          {children}
        </OtherContext.Provider>
      </NameContext.Provider>
    )
  })

Btw, what about docs? I am not sure how to contribute there... Not even mentioning that testHook isn't there at all yet. I assume it's different repo so I should try to handle it in this PR, right?

[danielkcz]

@kentcdodds Are you ok with ignoring that eslint rule in tests (last commit)? If yes and documentation will be tackled later, then it's ready for merge.

[kentcdodds]

This is fine. Docs will go on the docs website. Would love a contribution the too of you please. Thanks!

[kentcdodds]

🎉 This PR is included in version 5.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[danielkcz]

@kentcdodds Would not mind contributing, but I do have trouble finding the repo for docs. Would be a good idea to mention that in CONTRIBUTING.

[kentcdodds]

Would be a good idea to mention that in CONTRIBUTING.

Agreed! Would you like to add a note about that? The docs repo is linked in the docs: https://github.com/alexkrolick/testing-library-docs

[alexkrolick]

I'd like to do a follow-up PR to add this option to render. I'll reopen the issue with a check for the testHook part.

Thanks @FredyC!

[ThanhPhat1080]

Hi. Could you guys please let me know where is the docs to see how to implement testHook. For now, I try to implement testing with my context but it not work.

const useTestContext = () => {
  return useContext(AccountContext);
};

testHook(
    () => {
      accountState = useTestContext();
    },
    {
      wrapper: () => (
        <BrowserRouter>
          <AccountProvider>
            <AuthenticationForm />
          </AccountProvider>
        </BrowserRouter>
      ),
    },
  );

The accountState is undefined for now.

[danielkcz]

@ThanhPhat1080 Yea well, docs are kinda behind on this. I want to dive into that but got some other hurdles on the path. As for your example, you need this.

testHook(
    () => {
      accountState = useTestContext();
    },
    {
      wrapper: ({ children }) => (
        <BrowserRouter>
          <AccountProvider>
            <AuthenticationForm>{children}</AuthenticationForm>
          </AccountProvider>
        </BrowserRouter>
      ),
    },
  );

It's not intuitive much for sure and I am not too happy about it either. I am not sure if it could somehow automagically inject those children there.

[ThanhPhat1080]

Thanks @FredyC It work for now, this is my code to let it work

testHook(
    () => {
      accountState = useTestContext();
    },
    {
      wrapper: ({ children }) => (
        <BrowserRouter>
          <AccountProvider>
            {children}
            <AuthenticationForm />
          </AccountProvider>
        </BrowserRouter>
      ),
    },
  );

I have a question. Example my component have button and when fire click on it, it should change the context-value and update UI. I want to test that action and test the UI is updated or not. I tried using render but the context-value is not change. So testHook can test it or not?

[alexkrolick]

Docs PR for testHook: testing-library/testing-library-docs#32

[alexkrolick]

@ThanhPhat1080 testHook is meant to test the return value of custom hooks. For testing components that use the hooks, you test them the normal way, with render.

[ThanhPhat1080]

Thanks @alexkrolick

[kentcdodds]

🎉 This issue has been resolved in version 5.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀