{"id":15412468,"url":"https://github.com/robertknight/react-testing","last_synced_at":"2025-09-16T05:31:49.044Z","repository":{"id":29206981,"uuid":"32738402","full_name":"robertknight/react-testing","owner":"robertknight","description":"Slides, notes and sample project from a talk on testing React applications given at the London React meetup group","archived":false,"fork":false,"pushed_at":"2020-04-22T14:24:08.000Z","size":1848,"stargazers_count":189,"open_issues_count":0,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T01:11:05.489Z","etag":null,"topics":["react","testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robertknight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-23T14:50:13.000Z","updated_at":"2024-03-18T06:39:11.000Z","dependencies_parsed_at":"2022-08-17T20:05:24.634Z","dependency_job_id":null,"html_url":"https://github.com/robertknight/react-testing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/robertknight/react-testing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Freact-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Freact-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Freact-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Freact-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertknight","download_url":"https://codeload.github.com/robertknight/react-testing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Freact-testing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275364770,"owners_count":25451520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-16T02:00:10.229Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","testing"],"created_at":"2024-10-01T16:53:21.402Z","updated_at":"2025-09-16T05:31:48.561Z","avatar_url":"https://github.com/robertknight.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OBSOLETE ADVICE WARNING\n\n_(Update on 2020-04-22)_: This talk was given a long time ago. Tools and best practices have evolved since then. For more up-to-date information, have a look at:\n\n- The [Testing Overview](https://reactjs.org/docs/testing.html) section in the official React docs\n- A [blog post](https://robertknight.me.uk/posts/shallow-rendering-revisited/) I wrote about unit-testing React or Preact components\n\nReact Testability\n=================\n\nThis is a simple Twitter client project which demonstrates\nvarious tools and techniques for writing tests for React\ncomponents, written as part of a talk ([slides](https://robertknight.github.io/react-testing/docs/react-london-talk.html),  [video](https://www.youtube.com/watch?v=_RKrgouBvLM)) at the\n[London React](http://www.meetup.com/London-React-User-Group/) meetup.\n\nIt shows the essentials for writing tests for a React application that can be run in Node\nand the browser, isolating modules under test using shallow rendering and rewire() and\nusing Flummox for testable use of the Flux architecture.\n\n## Requirements\n * NodeJS 4.x or later is required in order to use the current version of the jsdom library.\n\n## Building and running\n\n```\nnpm install .\nmake\n\n# run the app\n# (you can also use 'webpack-dev-server')\npython -m SimpleHTTPServer 8000\nopen http://localhost:8000\n\n# run tests in the browser\nopen tests.html\n\n# run tests on the command-line\nmake test\n```\n\n## Libraries and Tools Used\n * React (obviously). v0.13 is used for [shallow-rendering support](http://facebook.github.io/react/docs/test-utils.html#shallow-rendering) which enables\n   testing of rendering of a single level of the component tree in isolation.\n   _Update (28/02/16): Shallow rendering support has since improved in React v0.14.7 to\n   include some support for stateful components_\n * [Mocha](http://mochajs.org/) and chai are the basic testing frameworks used, these were chosen as they\n   are popular, polished and well documented.\n * [Webpack](http://webpack.github.io/) is used to package the tests for running/debugging in the\n   browser.\n * [jsdom](https://github.com/tmpvar/jsdom) is used for testing of rendering DOM components outside of the browser.\n * The [Flummox](https://github.com/acdlite/flummox) implementation of the Flux architecture\n   is used for fetching data and updating views in response.\n   [Flummox](https://github.com/acdlite/flummox) avoidance of singletons makes it\n   easy to inject fake/mock actions in unit and integration tests. _Update (28/02/16): Flummox still works perfectly well,\n   but [Redux](https://github.com/reactjs/redux) has since become the de-facto choice for state management in the\n   React community and it has an even better testability story._\n * [Rewire](https://github.com/jhnns/rewire) is used to show one approach to mocking out\n   React components in tests. _Update (28/02/16): I would probably recommend looking at\n   [inject-loader](https://www.npmjs.com/package/inject-loader) for Webpack\n   or [Proxyquire](https://github.com/thlorenz/proxyquire) for Browserify instead as these provide\n   a cleaner way to mock JS modules in my view_.\n * [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) provides a uniform API for fetching data in the browser and Node.\n\n## Recommended Reading \u0026 Videos\n * [Awesome React - Testing React Tutorials](https://github.com/enaqx/awesome-react#testing-react-tutorials) - Awesome React is a great collection\n   of links for all aspects of building React apps. The section on testing references a number of useful tutorials.\n * Separating visual and data-fetching components\n  * [React.js Conf 2015 - Making your app fast with high-performance components](https://www.youtube.com/watch?v=KYzlpRvWZ6c). This talk introduces a policy of separating pure visual components from containers which contain data fetching logic.\n * Beyond unit testing\n  * [Dave McCabe - Property Testing for React](https://vimeo.com/122070164). This is a great talk on how to do property testing, where tests are fed a stream of random but repeatable and plausible inputs, and the testing framework checks that various invariants that you specify hold for all inputs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertknight%2Freact-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertknight%2Freact-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertknight%2Freact-testing/lists"}