testing-library / testing-library/testing-library-docs

Rerender with a wrapper

Open
#1,156 1 comment 5 reactions 1 assignee View on GitHub

@eps1lon is already working on this.

Since Oct 8, 2022.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

Description

  • @testing-library/react version: 13.4.0
  • Testing Framework and version: jest @ 29.0.3
  • DOM Environment: jsdom @ 20.0.0
Relevant code or config:
// in test utils
const customRender = (
  ui: ReactElement,
  apolloMocks?: ApolloMocks,
  options?: Omit<RenderOptions, 'wrapper'>
) =>
  render(ui, {
    wrapper: () => ui, // this would include our providers wrapped around ui but this demonstrates the issue in a cleaner way
    ...options,
  });

// in test file

const Comp = ({ number }: { number: number }) => <p>{number}</p>;

it('check render', () => {
    const { rerender } = customRender(<Comp number={1} />);
    rerender(<Comp number={2} />);
    expect(screen.getByText('2')).toBeInTheDocument();
  });
What you did:

Rerendering a component that was originally rendered out with the wrapper option, combining two different guides in the docs.

What happened:

No props are updated. The component does rerender, however it does so with the "old" props. (So in the example above, the test fails because 1 is present instead of 2.)

Reproduction:

Happy to add this if necessary.

Problem description:

We can't actually re-render stuff :) The workaround we're using is to put the wrapper directly into the test but that sort of defeats having any wrapper to begin with.

Suggested solution:

Not sure how the internals work and why the wrapper would interfere with the props. I imagine we'd need to see why the props aren't being passed correctly and fix it on that level.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.