Skip to content

README: Add render options Example for container #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 8, 2018
Merged

README: Add render options Example for container #132

merged 2 commits into from
Jul 8, 2018

Conversation

duncanleung
Copy link
Contributor

@duncanleung duncanleung commented Jul 8, 2018

Aside: Thank you for this library! I really really enjoy the API and testing philosophy behind it. Also, I really enjoyed your "Testing React Applications" workshop on Front End Masters!

I'm still very new to testing, so I hope that my README example makes sense. Open to all feedback! Thank you!

What:
README: Add render options example for container.

Why:
I was unit testing a tablebody element, and got a validateDOMNesting error because:

By default, react-testing-library will create a div and append that div to the document.body and this is where your react component will be rendered.

Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>.
    in tbody (created by TableBody)
    in TableBody (created by TableBody)
    in TableBody

It was not straight forward for me to find out how to use the options parameter in the render() method.

I think it will be helpful to add an example to the README.

How:
My original unit-test was:

import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";

import TableBody from "../TableBody";
import listingDataMock from "../__mocks__/TableBody-listing-data";

afterEach(cleanup);

describe("TableBody", () => {
  test("Snapshot", () => {
    //Arrange--------------
    const listingData = listingDataMock;
    const tableBodyKey = "candidateId";

    const props = {
      listingData,
      tableBodyKey
    };

    const { container } = render(<TableBody {...props} />);

    //Assert---------------
    expect(container).toMatchSnapshot();
  });
});

Checklist:

  • Documentation
  • Tests
  • Ready to be merged
  • Added myself to contributors table

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great. Thanks!

@kentcdodds kentcdodds merged commit 68bcdc1 into testing-library:master Jul 8, 2018
@kentcdodds
Copy link
Member

Would you like to add yourself to the contributors table?

@duncanleung
Copy link
Contributor Author

Sure! Thank you!

I guess I have to do this with another PR since this one is merged already?

Sent with GitHawk

@kentcdodds
Copy link
Member

Yep 👍

@kentcdodds
Copy link
Member

🎉 This PR is included in version 4.1.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

julienw pushed a commit to julienw/react-testing-library that referenced this pull request Dec 20, 2018
* Fix incorrect getElementById usage in README

The current example is broken because getElementById only works on
Document object, not the body.

* Add campbellr to contributors list
lucbpz pushed a commit to lucbpz/react-testing-library that referenced this pull request Jul 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants