{"id":16820720,"url":"https://github.com/nighttrax/react-test-buffet","last_synced_at":"2025-03-22T03:31:38.813Z","repository":{"id":22882370,"uuid":"26230456","full_name":"NiGhTTraX/react-test-buffet","owner":"NiGhTTraX","description":"An all-you-can-eat buffet of React TDD","archived":false,"fork":false,"pushed_at":"2019-08-30T20:34:41.000Z","size":6431,"stargazers_count":44,"open_issues_count":14,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T07:43:20.077Z","etag":null,"topics":["acceptance-testing","coverage","coverage-report","diff","docker","gui-testing","mocha","react","screenshot","selenium","tdd","unit-testing","visual-regression","visual-tests"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NiGhTTraX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-05T17:14:12.000Z","updated_at":"2022-11-08T06:12:15.000Z","dependencies_parsed_at":"2022-08-21T15:50:16.568Z","dependency_job_id":null,"html_url":"https://github.com/NiGhTTraX/react-test-buffet","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiGhTTraX%2Freact-test-buffet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiGhTTraX%2Freact-test-buffet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiGhTTraX%2Freact-test-buffet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiGhTTraX%2Freact-test-buffet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NiGhTTraX","download_url":"https://codeload.github.com/NiGhTTraX/react-test-buffet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244902929,"owners_count":20529114,"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","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":["acceptance-testing","coverage","coverage-report","diff","docker","gui-testing","mocha","react","screenshot","selenium","tdd","unit-testing","visual-regression","visual-tests"],"created_at":"2024-10-13T10:57:52.033Z","updated_at":"2025-03-22T03:31:37.782Z","avatar_url":"https://github.com/NiGhTTraX.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"An all-you-can-eat buffet of React TDD\n======================================\n\n[![Build Status](https://travis-ci.org/NiGhTTraX/react-test-buffet.svg?branch=master)](https://travis-ci.org/NiGhTTraX/react-test-buffet)\n----\n\n\n## Testing tools\n\n- [Mocha](http://mochajs.org/) - testing framework\n- [Chai](http://chaijs.com) - assertion library\n- [Sinon](http://sinonjs.org) - mocking library\n- [jsdom](https://github.com/tmpvar/jsdom) - server side DOM\n- [Babel](https://babeljs.io/) - transpile ES6 (including JSX) to ES5\n- [Webpack](https://webpack.github.io/) - module bundler\n- [Istanbul](http://gotwarlost.github.io/istanbul/) - code coverage\n- [WebdriverIO](http://webdriver.io/) - Selenium 2.0 bindings for NodeJS\n- [Selenium](http://www.seleniumhq.org/) - Web Browser Automation\n- [Docker](https://www.docker.com/) - containerization platform\n- [Mugshot](https://github.com/uberVU/mugshot) - visual regression testing\n\n\n# Running the app\n\n![npm-start](./docs/npm-start.gif)\n\nRunning `npm start` will spin up a Docker container that will install the npm\npackages and start a Webpack dev server with hot reloading. Changes to the\nsource code on the host will be reflected inside the container. Having the app\nin the container removes the need for devs to install Node and the npm packages\non their machines. This in turn makes it very easy to get rid of problems where\ndevelopers get out of sync with the Node version or have stale packages\ninstalled.\n\nIf you need to stop/restart the container you can use `npm stop`. Given that you\ndon't change the `package.json` file, the npm packages will be cached next time\nyou start the container.\n\nIf for some reason you prefer to install everything locally, you can use `npm\nrun _start` instead.\n\n\n# Node tests\n\n![unit-tests-in-node](./docs/unit-tests-in-node.png)\n\n`npm run test:node` will run the tests in Node using `Mocha`. This is useful for\na rapid feedback loop. You can also watch them for changes with `npm run\ntest:node:watch`. `jsdom` is used for providing a browser like environment.\n\n\n## Debugging the node tests\n\n![debugging-unit-tests](./docs/debugging-unit-tests.png)\n\n`npm run test:node:debug` will run the same Mocha tests and attach the Node\ninspector. Use Chrome to go to [chrome://inspect](chrome://inspect) and debug\nthe tests with the Chrome dev tools.\n\n\n## Coverage\n\n![coverage](./docs/coverage.png)\n\nThe tests automatically generate coverage reports using `Istanbul`. You can find\nthem in the [tests/results/coverage](./tests/results/coverage/index.html)\nfolder. **Both Node tests and GUI tests report coverage** which allows\nreaching 100% coverage for those cases where Node tests are not enough (scroll\nevent handlers, browser quirks, etc.).\n\n\n# GUI tests\n\n![acceptance-tests](./docs/acceptance-tests.png)\n\nThe tests open actual browsers (Chrome and Firefox) and control them through\n`Selenium`. Everything happens in `Docker` containers for stable and\nreproducible builds.\n\n\n## Visual regression tests\n\n![visual-tests](./docs/visual-tests.png)\n\nIf you want to also take a screenshot after a GUI test and\ncompare it on the next runs, simply use `vit` (_visual_ it) instead of\n`it`.\n\n```js\nimport { describe, vit } from './suite.js';\n\ndescribe('My app', () =\u003e {\n    vit('should look the same', async browser =\u003e {\n      await browser.click('.foobar');\n    });\n});\n```\n\nThe screenshot will be taken at the end of the test definition\nonly if there were no exceptions thrown. Think of it as an extra\nassertion at the end of the test.\n\nIf there are any visual changes a diff will be created highlighting\nthem and the test will fail. If the changes are deliberate you should\ncommit the new screenshot and rerun the tests. You can find the new\nscreenshots and diffs in the\n[tests/gui/screenshots](./tests/gui/screenshots) folder.\n\n\u003e TODO: these tests don't benefit from Jest's parallel runner\nbecause image comparison is\n[super slow](https://github.com/facebook/jest/issues/5163#issuecomment-355509597)\nin a Jest sandbox.\n\n\n## Debugging the GUI tests\n\n![debugging-acceptance-tests](./docs/debugging-acceptance-tests.gif)\n\nAdd `debugger` statements in your tests and run `npm run test:gui:debug`.\nThe tests won't start until you connect to the debugger by going to\n[chrome://inspect](chrome://inspect) and selecting the local debugger target.\nYou're going to need [Chrome\n55+](https://nodejs.org/en/docs/inspector/#chrome-devtools-55) for this to work.\n\nOnce in the inspector, press the continue execution button and the tests will\nstart running.\n\nAlongside debugging the test code, you can also follow the state of the browser\nby connecting with VNC to [localhost:5900](vnc://localhost:5900) with the\npassword `secret`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnighttrax%2Freact-test-buffet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnighttrax%2Freact-test-buffet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnighttrax%2Freact-test-buffet/lists"}