react-redux-testing.md

React/Redux Testing

React and Components

• Approaches to Testing React Components
  http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/
  A great starting point to testing, looking at the main ways you can test component structure and state handling

• Test Driven React Tutorial
  http://spencerdixon.com/blog/test-driven-react-tutorial.html
  Describes project setup and basic approaches, using the common stack of Webpack+Karma+Mocha+Chai+Sinon

• How to Test React.js Components
  https://nemisj.com/how-to-test-react-js-components/
  Covers what to test, and how to test things like props and shallow rendering

• Testing React Applications
  http://12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/
  A long, in-depth article describing approaches and use of Tape, React TestUtils, and Enzyme

• TDD and React Components
  https://medium.com/@nackjicholsonn/tdd-and-react-components-5ae5a9a5a7bf
  Detailed example of using TDD to design and develop a React component, using Teaspoon for testing

• What to Test in a React App
  https://daveceddia.com/what-to-test-in-react-app/
  General guidance on what types of tests you might want to write and what to test for.

• Testing React Applications
  https://www.youtube.com/watch?v=59Ndb3YkLKA
  A presentation by Max Stoiber, looking at what types of things to test in a React/Redux application, and ways to use tools like Jest to speed up the testing process.

• Good Practices for Testing React Apps
  https://medium.com/@TuckerConnelly/good-practices-for-testing-react-apps-3a64154fa3b1
  Thoughts on writing end-to-end tests, unit tests, and integration tests for Reaact applications, including treating components as "black boxes".

• Testing React components with Jest and Enzyme
  https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f
  Examples of how to use Jest's snapshot testing and Enzyme's component API to write component tests

• The Right Way to Test React Components
  https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22
  Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract.

• Testing React Components with Teaspoon and Unexpected
  http://dchambers.github.io/articles/testing-react-components-with-teaspoon-and-unexpected/
  A short but useful look at a couple testing libraries and ways to use them.

• Unit Testing React Components and Redux Reducers
   https://web.archive.org/web/20161028043905/http://pebblecode.com/blog/react-redux-unit-testing/
   Some basic examples for testing reducers and components.

• Getting Started with TDD in React
  https://semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react
  Covers a typical Mocha+Chai+JSDOM+Enzyme setup, talks about why/how/what to test, and walks through several examples.

• Testing React Applications
  https://youtu.be/KBhHsYlF4mQ
  A fantastic talk that goes through many important details of trying to test React components under JSDOM.

• Testing in React: Getting Off the Ground
  https://medium.com/javascript-inside/testing-in-react-getting-off-the-ground-5f569f3088a
  A look at approaches and ways to start testing React components

• Testing React Applications Examples
  https://github.com/mxstbr/react-testing
  A repo showcasing how to test various parts of a common React/Redux app using Mocha, expect and enzyme

• React TDD Guide
  https://github.com/zpratt/react-tdd-guide
  A repo with step-by-step commits demonstrating approaches to testing React apps

• Idiomatic React Testing Patterns
  https://gist.github.com/joshdover/235714771d94509a83609b16d232014a
  https://news.ycombinator.com/item?id=12087437
  Several useful patterns for testing React components, with discussion on HN.

• A Step-by-Step TDD Approach on Testing React Components using Enzyme
  https://web.archive.org/web/20161002211902/http://thereignn.ghost.io/a-step-by-step-tdd-approach-on-testing-react-components-using-enzyme/
  An excellent article covering TDD, React, and Enzyme.

• How to Test React Components Using Jest
  https://www.sitepoint.com/test-react-components-jest/
  An in-depth look at how to set up and use Jest for testing

• React UI Testing with Storybook
  https://storybooks.js.org/docs/react-storybook/testing/react-ui-testing
  Looks at using the React Storybook component editor to do UI testing

• Testing React Components with mocha-webpack
  https://medium.com/@mmontoya/testing-reactjs-components-with-mocha-webpack-ce7f710d268c
  Looks at how mocha-webpack can be used to enable faster testing for React components

• Testing React Components with Enzyme and Mocha
  https://ifelse.io/2016/04/04/testing-react-components-with-enzyme-and-mocha/
  Examples of setting up a Webpack+Mocha test environment, and using Enzyme for implementing tests

• Testing for PropType Errors in React
  https://daveceddia.com/testing-for-proptypes-errors/
  Some quick examples that use Sinon to check for error logging to help verify correct prop usage during testing.

• Testing React Applications
  https://blog.logrocket.com/testing-react-applications-part-1-of-3-ebd8397917f3
  Describes several types of unit tests that can be written in a React app (component tests, component tests, storybook tests), and the intent and benefits of each.

• Testing React Applications with Jest
  https://auth0.com/blog/testing-react-applications-with-jest/
  An in-depth explanation of how to use Jest for React testing, including setup, basic test structure, using Enzyme for rendering React components, mocking, and more.

• Never render in React testing again
  https://medium.com/@planttheidea/never-render-in-react-testing-again-fc4bcfc2f71d
  Some examples of using higher-order functions to simplify test logic

• React + TDD = Love
  https://medium.com/@admm/test-driven-development-in-react-is-easy-178c9c520f2f
  A tutorial that walks through a TDD-based approach to building components in an application.

• Snapshot Testing React with Jest
  https://daveceddia.com/snapshot-testing-react-with-jest/
  An excellent explanation of what "snapshot testing" is, and how to apply it to test React components using Jest

• React and Redux Testing with Jest: How Some Jokers Learned to Take Snapshots
  https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6
  Discussion of how Jest snapshot tests can be used to replace some manually-written tests for both React components and Redux logic.

• Snapshot testing React Components with Jest
  https://medium.com/hackernoon/snapshot-testing-react-components-with-jest-744a1e980366 Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent.

• Testing React Components https://nerdblog.pl/post/166842840969/testing-react-components
  An extensive look at different ways to test React components using the Enzyme library. Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests.

• An introduction to testing React components with Enzyme 3
  https://www.jackfranklin.co.uk/blog/introduction-to-react-tests-enzyme/ Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component

• Creating a React Component using TDD
  http://www.alayor.com/2017/Creating-a-React-Component-using-TDD
  Demonstrates writing a simple React component using the TDD "red-green" testing approach.

• Implementing basic Component tests using Jest and Enzyme
  https://hackernoon.com/implementing-basic-component-tests-using-jest-and-enzyme-d1d8788d627a
  Describes the Jest and Enzyme tools, how they're used for testing React components, and gives examples of some simple tests.

• Testing React Components
  https://medium.com/@skidding/testing-react-components-30516bc6a1b3
  Thoughts on good practices for testing React components, based on writing thousands of tests. Describes complexities in testing real-world components that make use of multiple HOCs or that glue different units together, and how the Cosmos tool can help simplify those tests using mocking.

• Unit test code that uses CSS Modules
  https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707
  Provides several solutions for handling imports of CSS Modules when running unit tests

• Testing React components using render props
  https://kentcdodds.com/blog/testing-components-using-render-props Kent C Dodds gives several examples and suggestions of approaches for testing components that make use of render props.

• Lessons learned testing React & Redux apps with Jest and Enzyme
  https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b
  Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested.

• Integration Testing React and Redux with Mocha and Enzyme
  https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/
  Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using mocha-steps for multi-step tests, and working with React-Router.

• How to write clean React unit tests with Enzyme
  http://www.bradleycbuchanan.com/b/clean-react-enzyme/
  Several tips for writing simpler React component tests with Enzyme, including focusing on the logic, testing as shallow as possible, and writing assertions using JSX.

• Acceptance Test Driven Development with React/Redux
  https://itnext.io/acceptance-test-driven-test-with-react-redux-part-1-7ae8cb4fab00
  A multi-part tutorial series that walks through creating and refactoring a React/Redux application using an Acceptance Test Driven Development approach.

Redux

• Simple React/Redux Testing
  https://medium.com/@caljrimmer/simple-react-redux-testing-cd579d4c2103
  Looks at how to test rendering, behavior, and state of an application

• Unit Testing a Redux App
  https://www.codementor.io/reactjs/tutorial/redux-unit-test-mocha-mocking
  Example ways to test pieces of a Redux app, including actions, reducers, and middleware

• React-Boilerplate Testing Docs
  https://github.com/mxstbr/react-boilerplate/blob/v3.0.0/docs/testing/unit-testing.md
  https://github.com/mxstbr/react-boilerplate/blob/v3.0.0/docs/testing/component-testing.md
  Useful description of how to use Mocha, Expect, and Enzyme to test React and Redux code

• Testing Redux Applications
  http://randycoulman.com/blog/2016/03/15/testing-redux-applications/
  http://randycoulman.com/blog/categories/getting-testy/
  A great writeup on how to specifically deal with testing pieces of a Redux app. The "Getting Testy" post series also has a lot of really good idea on how to go about writing tests and what kinds of things should be tested.

• Unit Testing Redux Container Components
  https://web.archive.org/web/20161105110913/http://pebblecode.com/blog/testing-redux-containers/
  Demonstrates techniques for properly testing Redux-connected React components using a mock store

• Unit Testing React Components that use Redux
  http://www.thereformedprogrammer.net/unit-testing-react-components-that-use-redux/
  Tips on unit testing components that render more Redux-connected components

• Generative Testing using Redux: Reducers
  https://medium.com/javascript-inside/generative-testing-your-redux-reducers-326d7368f284
  A look at using "generative testing" to autoomatically test reducers with varying inputs

• Some Thoughts on Testing React/Redux Applications
  https://medium.com/javascript-inside/some-thoughts-on-testing-react-redux-applications-8571fbc1b78f
  Guidelines and best practices for what and how to test in a React/Redux app

• Test Driving a change to a Redux application - Step by Step
  https://medium.com/@kensodev/test-driving-a-change-to-a-react-redux-application-step-by-step-6c8856e7644c
  Demonstrates a TDD approach to reworking a Redux app feature

• Workship Slides: React and Redux Testing
  http://www.slideshare.net/visualengin/workshop-23-reactjs-react-redux-testing
  A slideshow that gives a helpful overview of the React Test Utilities and Enzyme to test React components

• Low effort, high value: Integration tests in Redux apps
  https://hackernoon.com/low-effort-high-value-integration-tests-in-redux-apps-d3a590bd9fd5
  A discussion of the benefits of unit tests vs integration tests, with examples of how to test the various aspects of a Redux app

• Testing React/Redux Applications
  https://github.com/leocristofani/testing-react-redux-applications
  Several useful resources for testing, including tips/guidelines, a sample application with tests, and links to more resources.

• How to test React and Redux with Redux-Saga and ReactDND
  https://medium.freecodecamp.com/testing-react-and-redux-with-redux-saga-and-reactdnd-whew-dedebcbd78dd
  In-depth examples of testing React components using the Teaspoon library, as well as setting up tests for Redux-connected components, Redux-Saga functions, and uses of ReactDND.

• Simplify your Redux unit testing using Tape
  https://medium.com/@kilkelly/simplify-your-redux-unit-tests-using-tape-ad391aecf446
  https://github.com/kilkelly/tape-redux-unit-testing
  Some quick examples of using the Tape library to test Redux reducers, with an accompanying example repo

• Unit Testing Redux Container Components, Part 1
  https://www.wsbrunson.com/testing-redux-containers/ Some useful tips for setting up tests for Redux-connected components

• Test Your Redux Container with Enzyme
  https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec
  Examples for using Enzyme to test Redux-connected components, including passing in a mock store, use of shallow rendering, and testing mapDispatch.

• Redux Testing Step by Step: A simple Methodology for Testing Business Logic
  https://hackernoon.com/redux-testing-step-by-step-a-simple-methodology-for-testing-business-logic-8901670756ce
  An excellent article by Tal Kol, describing how different types of tests fit together, the different kinds of Redux code that need to be tested, and how to write tests for each.

• TDDing React + Redux
  http://engineering.pivotal.io/post/tdding-react-and-redux/
  Helpful examples of patterns for testing various parts of a React+Redux app.

• Testing Redux: Async Action Creators
  http://joeellis.la/testing-redux-actions/
  Describes approaches for testing async action creators, particularly thunks that make AJAX calls.

• A guide to TDD a React/Redux TodoList App
  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091
  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-2-8d4cb2dc154c
  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-3-f25c2289c54
  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-4-edb62e113c9b
  A 4-part series that demonstrates a Test-Driven Development approach to writing a React/Redux app, with detailed explanations of what each test example does.

• Building a React/Redux app with Test Driven Development
  https://medium.com/@gilly.ames/building-a-react-redux-app-with-test-driven-development-b2ed73e60be9
  A guided walkthrough that shows how to apply TDD to actions, reducers, and services

• Testing Replicated Redux
  http://jimpurbrick.com/2017/07/31/testing-replicated-redux/
  Describes how the use of "property testing" to generate possible actions helped the author track down bugs in his distributed multiplayer Redux application.

• Test-Driven Development with React and Redux, using Redux TDD
  https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918
  https://hackernoon.com/redux-tdd-a-deep-dive-344cd7682a54
  Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application.

• Writing tests for redux-observable
  https://dev.to/julioolvr/writing-tests-for-redux-observable
  Quick examples of how to set up tests for redux-observable epics.

• End-to-end testing on a React-Redux app
  https://medium.com/@darioghilardi/end-to-end-testing-on-a-react-redux-app-10f5a26f2f61
  Some high-level thoughts of how to best implement end-to-end testing in a way that works with React-Redux apps. Discusses use of Cypress, real APIs vs mock APIs, and some Rails-specific setup.

• How to Snapshot Test Everything in Your Redux App with Jest
  https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea
  Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests.

• Jest Testing Patterns for React-Redux Applications
  https://ranjithnair.github.io/2017/11/17/Jest-Testing-basics.html
  Includes info on basic Jest test setup, as well as examples of using Jest to test React components, Redux-connected components, actions and reducers, API calls, and React event behavior.

• Recipes for Testing Redux Actions and Reducers
  https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers
  Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter.

• Unit Testing Redux Connected Components
  https://medium.com/@lukepierotti/unit-testing-redux-connected-components-692fa3c4441c
  Discusses testing connected components with a mock store vs testing mapState functions and plain components separately.

• Interview: redux-saga-test-plan
  https://survivejs.com/blog/redux-saga-test-plan-interview/
  An interview with the author of the redux-saga-test-plan library, discussing how it works and how it can simplify the process of testing sagas.

• Subcutaneous Testing against React + .NET Applications
  https://jeremydmiller.com/2017/12/19/subcutaneous-testing-against-react-net-applications/
  Discusses a possible approach for using the Storyteller .NET integration testing tool to help drive a client-side Redux app for integration testing.

• Creating unit tests for redux-observable with marble diagrams
  https://medium.com/@dmitrymartynov_84736/creating-unit-tests-for-redux-observable-with-marble-diagrams-b1e1b34e5f44
  Describes how to set up tests for redux-observable epics, and define expectations for behavior using marble diagrams

• How I test redux-saga
  https://codeburst.io/how-i-test-redux-saga-fcc425cda018
  Short examples of a typical saga and a test for that saga, with some thoughts on a couple tricks for testing sagas.

• Testing strategies for Redux apps
  https://www.codesai.com/2017/04/test-driving-react-redux
  https://www.codesai.com/2017/04/testing-strategies
  https://www.codesai.com/2017/06/testing-hacks-react-redux
  A series of posts describing several strategies for testing Redux apps, including larger integration tests with mock APIs, handling of async logic, routing, and scroll events.

• Evaluating Redux Saga Test Libraries
  http://blog.scottlogic.com/2018/01/16/evaluating-redux-saga-test-libraries.html
  Looks at several ways to approach testing sagas, and how specific saga test helper libraries use those approaches. Includes a helpful table listing which approaches each helper library supports.

• Testing mapState, mapDispatch, and connected components
  http://jsramblings.com/2018/01/15/3-ways-to-test-mapStateToProps-and-mapDispatchToProps.html
  http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html
  A pair of articles that discuss ways to handle testing the various pieces of connected components.

General Testing, Tools, and Setup

• An Overview of JavaScript Testing in 2018
  https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3
  A detailed guide to the terms, tools, and concepts used in testing Javascript.

• Javascript Testing: Unit vs Functional vs Integration
  https://www.sitepoint.com/javascript-testing-unit-functional-integration/
  A comparison of the various levels of tests you can run, and what roles they play in development.

• Reddit - "Karma/Mocha/Chai/Sinon setup"
  https://www.reddit.com/r/javascript/comments/4217x6/ive_spent_six_hours_attempting_to_set_up/
  Reddit user Cody_Chaos describes his approach to running unit tests under Node with Mocha, and integration tests in a browser with Karma. Includes several useful config setup snippets.

• Setting Up Javascript Testing Tools for ES6
  http://x-team.com/2016/05/setting-up-javascript-testing-tools-for-es6/
  Tips on configuring tools to work with ES6 code, and writing tests using ES6

• Keep Calm and Love Javascript Unit Tests - Part 2: Asynchronism
  http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/
  Useful tips for testing asynchronous behavior under Mocha.

• Testing with Mocha and Webpack
  http://randycoulman.com/blog/2016/03/22/testing-with-mocha-and-webpack/
  http://randycoulman.com/blog/2016/04/05/more-on-testing-with-mocha-and-webpack/
  Some excellent information on setting up a good test environment, including use of the mocha-webpack tool.

• ESLint Part 1: Exploration
  https://blog.scottnonnenberg.com/eslint-part-1-exploration/
  A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available.

• Keep Calm and Love Javascript Unit Tests
  http://www.theodo.fr/blog/2016/04/keep-calm-and-love-javascript-unit-tests-part-1/
  http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/
  An introduction to using Mocha, Chai, and Sinon to write unit tests for various scenarios.

• UI Testing at Urban Airship
  https://github.com/urbanairship/technical-blog/blob/master/AirshipUITesting.md
  In-depth discussion of complexities and approaches for testing real-world UI code, including test runners, mocking, and more.

• Testing with Jest Snapshots: First Impressions
  http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/
  Description of the pros and cons of using Jest's new Snapshot Testing feature

• Jest Testing Resources
  https://facebook.github.io/jest/blog/2016/07/27/jest-14.html
  https://facebook.github.io/jest/blog/2016/10/03/jest-16.html
  Announcements of updates to the Facebook Jest testing tool, with links to further articles and information.

• Migrating Ava to Jest
  http://browniefed.com/blog/migrating-ava-to-jest/
  Some quick tips on switching your testing config to use Jest

• Web Application Test Strategy
  https://blog.scottnonnenberg.com/web-application-test-strategy/
  Thoughts on a "test pyramid" approach to testing, balancing speed and results between unit tests, integration tests, and automation.

• Enzyme vs Unexpected-React
  https://medium.com/@bruderstein/enzyme-vs-unexpected-react-ee9cb099d12b
  A comparison of how Enzyme and Unexpected-React are used in testing React components, with arguments in favor of Unexpected-React

• Jest vs Mocha for React Testing
  https://spin.atomicobject.com/2017/05/02/react-testing-jest-vs-mocha/
  A comparison of the strengths and weaknesses of the Jest and Mocha testing frameworks

• Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest
  https://raygun.com/blog/javascript-unit-testing-frameworks/
  A useful comparison and summary of the major unit testing frameworks available

• Effective Snapshot Testing
  https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca
  Kent C Dodds looks at the pros and cons of using snapshot testing, and how to make snapshot tests more useful.

• Write tests. Not too many. Mostly integration.
  https://blog.kentcdodds.com/write-tests-not-too-many-mostly-integration-5e8c7fff591c
  Some short thoughts on the value of different kinds of tests, with extensive discussion in the comments.

• Stubbing HTTP Reqeusts with Sinon
  http://mherman.org/blog/2017/11/06/stubbing-http-requests-with-sinon/
  An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests.

• What makes a good test?
  https://medium.com/@alexkrolick/what-makes-a-good-test-dff3df6058a2
  A variety of short thoughts on why we write unit tests, how to write good tests, and some specific suggestions for working with snapshot tests and tests for async behavior.

• Testing UI
  https://charlespeters.net/writing/testing-ui/
  Thoughts on the benefits of different types of testing, including code coverage, unit tests for React components, snapshot tests, and integration tests.