simplify with React Testing Library #1
Conversation
kentcdodds
force-pushed
the
testing-docs-rtl
branch
from
ce4467c to
2dd86c9
Compare
| } |
There was a problem hiding this comment.
Did you know that the project is currently not setup to auto-format markdown (and all the code examples in the markdown). It would work if you remove "parser": "flow", from this file though :)
| <span>Hey, stranger</span> | ||
| ) : ( | ||
| <h1>Hello, {props.name}!</h1> |
There was a problem hiding this comment.
This was switched (incorrect) before
| import { render } from "react-dom"; | ||
| import { act } from "react-dom/test-utils"; | ||
|
|
||
| let container = null |
|
|
||
| act(() => { | ||
| render(<Hello name="Flarnie" />, container); |
There was a problem hiding this comment.
Having this additional test gives us no more confidence, so I don't have it in my version.
| ) : ( | ||
| <details> | ||
| <summary>{user.name}</summary> | ||
| <strong>{user.age}</strong> years old | ||
| <summary aria-label="name">{user.name}</summary> |
There was a problem hiding this comment.
Without the labels, the data would be difficult to understand for people using screen readers. Honestly, in a real app you'd probably have real labels and/or icons for this data (which would also have labels). So I'm adding these here so the tests can resemble what this kind of thing would look like in the real world.
| clearTimeout(timeoutID); | ||
| }; | ||
| }, | ||
| [props.onSelect] |
There was a problem hiding this comment.
This gave a linting warning because we didn't include props, so I destructured onSelect instead.
| }, | ||
| [props.onSelect] | ||
| ); | ||
| return [1, 2, 3, 4].map(choice => { |
|
|
||
| it("should select null after timing out", () => { | ||
| const yields = []; |
There was a problem hiding this comment.
Typically it's better to use mock functions because you can assert on the calls specifically. I'd rather encourage using mock functions.
| return root.toJSON(); | ||
| } | ||
| test("preserves its structure", () => { | ||
| expect(render(<Hello />).container).toMatchInlineSnapshot(` |
There was a problem hiding this comment.
By using toMatchInlineSnapshot, people avoid one of the biggest dangers of snapshots: "Huge snapshots that nobody reviews." If your snapshot is inline, then you're less likely to let it get huge.
There was a problem hiding this comment.
(working on a lint rule to enforce snapshot size for inline snaps jest-community/eslint-plugin-jest#244)
| }); | ||
| ``` | ||
|
|
||
| ### Snapshot testing {#snapshot-testing} | ||
|
|
||
| Frameworks like Jest also let you save 'snapshots' of data. Combined with react-test-renderer, we can save component structures, and verify they don't break in the future. It's typically better to make more specific assertions than to use snapshots (or at least ensure that the snapshot is small) because these kinds of tests include implementation details meaning they break easily and teams can get desensitized to snapshot breakages. |
There was a problem hiding this comment.
Not using react-test-renderer because snapshots of that includes a TON of implementation details. Snapshotting the DOM isn't terrific either, but it doesn't include nearly as many implementation details. Therefore you'll get fewer false negatives.
| }; | ||
| jest.spyOn(global, "fetch").mockImplementation(() => | ||
| window.fetch.mockImplementationOnce(() => |
There was a problem hiding this comment.
When it comes to mocks, I usually set resetMocks or clearMocks globally in Jest. There is rarely a reason to maintain mock state across tests.
There was a problem hiding this comment.
Maybe we should add a comment about that so people can look into it if they want to reduce the boilerplate
threepointone
force-pushed
the
testing-docs
branch
12 times, most recently
from
e3d3125 to
16e166d
Compare
Hey Sunil!
I'll add some inline comments, but here's how I want you to think about these changes. This is what I would do if I were 100% responsible for writing this documentation. I understand that you operate under different constraints and may not be able to accept all of these contributions. That's fine. Please take what you like and don't "throw the baby out with the bathwater." (That's a terrible phrase... I need a new one).
Several of the tests/components had bugs. So I pulled all the code out to a separate repo to make sure everything worked: https://github.com/kentcdodds/testing-docs-rtl-examples
Happy to iterate on this. I really want people getting into React to have stellar resources for testing! Thanks!