How to test if a component is rendered with the right props when using react-testing-library?

Question

I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones:

const News = () => (
  <div>
    <h1>News</h1>
    ...
    <FetchNextPageButton query={NEWS_QUERY} path="viewer.news" />
  </div>
)

const Jobs = () => (
  <div>
    <h1>Jobs</h1>
    ...
    <FetchNextPageButton query={JOBS_QUERY} path="viewer.jobs" />
  </div>
)

const Posts = () => (
  <div>
    <h1>Posts</h1>
    ...
    <FetchNextPageButton query={POSTS_QUERY} path="viewer.posts" />
  </div>
)

The thing is that I'd not like having to add tests on each of these components for a functionality that is already tested somewhere else, so I think that should be enough just to test that the component is rendered and that I'm passing the right props to it.

I'd have been able to test this easily with Enzyme with something like this:

expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({
  query: NEWS_QUERY,
  path: "viewer.news"
})

So I'm wondering what's the best approach to test it by using React testing library instead.

Emi · Accepted Answer · 2020-11-24 01:00:01Z

65

This is the approach that Kent C. Dodds (the creator of RTL) shared with me after discussing it with him:

import FetchNextPageButton from 'FetchNextPageButton'

jest.mock('FetchNextPageButton', () => {
  return jest.fn(() => null)
})

// ... in your test
expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)

edited Nov 24, 2020 at 1:00

answered Oct 30, 2019 at 22:16

Emi

5,1152 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Emi Over a year ago

@AlexMckay we discussed it in this twitter thread: twitter.com/kentcdodds/status/1189662486007468032

Youans Over a year ago

Am I the only one this did not work with? when I ran it states: Matcher error: received value must be a mock or spy function Received has type: function Received has value: [Function Component]

koo Over a year ago

@Youans You have to mock the component first, then pass it to the assertion.

Doug Over a year ago

note: this approach is NOT recommended by Kent C. Dodds. He wrote the code snippet that shows how to do it, but said he does not recommend the approach (this is also in the twitter thread). Similar question here

Emi Over a year ago

@Doug I understood that he doesn't recommend to do it as a rule of thumb, but in case you have to do it (there might be good reasons to test in isolation, he says), that's how he actually does it.

|

Ben · Accepted Answer · 2021-08-27 15:38:24Z

10

Don't believe it's possible. RTL looks like focusing on validating against DOM not React's components tree.

The only workaround I see is to mock FetchNextPageButton to make it rendering all props into attributes.

jest.mock("../../../FetchNextPageButton.js", () => 
  (props) => <div data-test-id="FetchNextPageButton" {...props} />);
....
const { getByTestId } = render(<YourComponent />);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("query", NEWS_QUERY);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("path", "viewer.news");

Sure, this is smoothly only for primitive values in props, but validating something like object or function would be harder.

Think, it's not RTL-way, but I agree it would be massive work to check that in scope of each container(and completely ignoring that would be rather a risk).

PS toHaveAttribute is from jest-dom

edited Aug 27, 2021 at 15:38

Ben

57.6k50 gold badges187 silver badges229 bronze badges

answered Oct 30, 2019 at 11:04

skyboyer

24k7 gold badges65 silver badges73 bronze badges

2 Comments

Khalifa Gad Over a year ago

This will require all the props to be in lowercase which kinda restricting, as render or act functions will throw a warning of unrecognized props.

skyboyer Over a year ago

@KhalifaGad yes, that's true. And you always can write more complex mocks if you don't like to see warnings.

eimerreis · Accepted Answer · 2022-03-31 09:46:10Z

In my case, I wanted to test that a Higher Order Component (HOC), correctly enhances the component that is passed to the HOC.

What I needed to do, is make the actual component a mock and pass it to the HOC. Like described in the existing answer, you can then just expect the properties, added by the HOC.

// after 'Component' get's passed into withSelectionConstraint, it should have an id prop
const Component = jest.fn(() => <h1>Tag Zam</h1>);
const WithConstraint = withSelectionConstraint(Component, ["instance"], true);
render(<WithConstraint />);

// passing the jest mock to the HOC, enables asserting the actual properties passed by the HOC
expect(Component).toHaveBeenCalledWith(
    expect.objectContaining({ ids: mockInstanceRows.map(x => x.id) }), 
    expect.anything()
)

Simon TOULOUZE · Accepted Answer · 2022-10-25 12:27:24Z

0

Based on Ben's answer, I wrote a version which doesn't raise any error :

jest.mock(
  'path/to/your/component',
  () => {
    const MockedComponent = (props: any) => {
      const cleanedProps = Object.keys(props).reduce<Record<string, unknown>>(
        (a, b) => {
          // Needed because html attributes cannot be camel cased
          a[b.toLowerCase()] = props[b].toString();
          return a;
        },
        {}
      );

      return (
        <div data-testid="any-test-id" {...cleanedProps} />
      );
    };

    return MockedComponent;
  }
);

Note that the attributes values (expect(getByTestId('any-test-id')).toHaveAttribute('attribute','value')) will be stringified.

answered Oct 25, 2022 at 12:27

Simon TOULOUZE

1

Collectives™ on Stack Overflow

How to test if a component is rendered with the right props when using react-testing-library?

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related