Redux: Switch React tests to react-test-renderer

[timdorr]

Since we've switched over to Jest and they recommend using react-test-renderer, we should stay in sync with that guidance.

The previous plan (#1481) was to use enzyme, but that doesn't support Jest's snapshot tests. I would like to add some of those as well, since they're a nice quick way to ensure you haven't broken anything unintentionally (or have missed a non-deterministic test that is falsely passing).

Lastly, we'll need to make sure any docs are updated for this as well. More and more tooling and projects are using Jest, so converging community focus on it is a good thing. It's pretty swell!

[aporiadin]

@timdorr

Hi Tim. I don't have a lot of experience with react and jest, but i really want to help you and improve my skills. I'm ready to work hard and a lot.

[brigand]

@timdorr you can use enzyme with snapshot tests, and even configure it so that expect(wrapper).toMatchSnapshot() works.

  // package.json
  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  }

Btw, I'm not saying enzyme is the better choice here, just that it's still an option.

[jimbolla]

I like the idea of redux and react-redux using the same testing tools that ship with create-react-app.

[borisyankov]

@timdorr I don't think you are correct.
Enzyme and Snapshot testing are in no way mutually exclusive.
They are used for different tasks.

In fact, Enzyme is still in the Jest documentation, on the same page you linked to.

[timdorr]

Ah, looks like that's my mistake then. I wasn't suggesting that we replace all Enzyme DOM testing with snapshots and call it a day, but I was wrong about them being mutually exclusive.

Nonetheless, throwing in another tool into the toolbox is something I'm hesitant about because it's one more thing to learn. I'd like to reduce fatigue wherever possible, so using the "batteries included" approach to React testing is probably better than layer more knowledge onto our users.

In any case, snapshot testing is great stuff, so we should start using it rather then worrying about implementation specifics. I do this for all network traffic on my API servers (Rails apps with the excellent vcr), so this is the DOM equivalent to that. It also makes writing tests a little bit easier, so others can contribute better tests with less effort. Should be a win-win all around.

[timdorr]

@Hemko Easiest thing you can do is check out the Redux repo locally, install everything, and get the tests up and running. You should be able to type npm test and run the main test suite, along with the tests in the examples. From there, I would look at any that are doing something like expect(renderedOutput).toContain("something").

In those cases, you're looking at the rendered DOM string to contain some text. That can be converted to a snapshot test very easily, because that's asking the same question: "does this component output the what I expected?" You can answer that question by either asking if it contains some sentinel value or just checking if the output is the same as before. You're basically just changing the scope of your test between the two (whole component vs. just a part of it). And the snapshot is less likely to generate a false positive test, because it's looking at the entire thing.

Anyways, I would start there. Try to find some tests that are checking output and change them to snapshot tests.

[aporiadin]

@timdorr Thanks for the explanation.
I found something like this expect(renderedOutput).toContain("something") only in the todomvc example (usage of the getRenderOutput function).
I want to make pull request with changes for this example in 1-2 days.

[aporiadin]

Forgot about shallow rendering with enzyme...

[bunshar]

@timdorr I had been writing jest snapshot tests in the shopping-cart example. @Hemko please allow me to send PR for that example.

[aporiadin]

@bunshar yes, of course. We can work together.

[borisyankov]

I have worked on extensive tests for the Real World example.
Most of them are just plain tests, some are Enzyme. I'll add few snapshot tests and do PR.

[dankreiger]

@timdorr any particular reason for switching over to Jest from Mocha? I'm bouncing between the frameworks trying to decide which one is best to support my react/redux testing

[timdorr]

@dankreiger Note that the decision here is whatever is best for Redux itself, not your particular use case. However, jest is generally faster, more pleasant to work with, and affords more features than mocha. Plus, it has a lot more development effort behind it at the moment.

[sbakkila]

Is this still in progress? I would like to write some tests for this, but I don't want to duplicate efforts.

[AuroreM]

Is this question still in progress ? @Hemko @bunshar ?
I would be glad to help :)

[augbog]

Also a friendly ping -- if there is a way the community can help please let us know! Would love to see this and possibly see #2632 get in :)

[timdorr]

This is getting somewhat old and enzyme has made some big improvements since I posted this, so I'm going to close it out for now. react-test-renderer PRs can still be accepted, but I don't think we need to track it as an issue.