### 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.