{"id":13447142,"url":"https://github.com/kentcdodds/dom-testing-library-with-anything","last_synced_at":"2025-07-25T08:10:25.689Z","repository":{"id":36090155,"uuid":"148914247","full_name":"kentcdodds/dom-testing-library-with-anything","owner":"kentcdodds","description":"Use DOM Testing Library to test any JS framework on TestingJavaScript.com","archived":false,"fork":false,"pushed_at":"2021-01-25T23:13:23.000Z","size":305,"stargazers_count":228,"open_issues_count":2,"forks_count":86,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-20T01:05:53.478Z","etag":null,"topics":["kcd-edu","testingjavascript"],"latest_commit_sha":null,"homepage":"https://testingjavascript.com/playlists/use-dom-testing-library-to-test-any-js-framework-ae28","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-15T15:26:34.000Z","updated_at":"2025-05-16T10:02:46.000Z","dependencies_parsed_at":"2022-09-20T10:14:45.764Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/dom-testing-library-with-anything","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kentcdodds/dom-testing-library-with-anything","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fdom-testing-library-with-anything","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fdom-testing-library-with-anything/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fdom-testing-library-with-anything/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fdom-testing-library-with-anything/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/dom-testing-library-with-anything/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fdom-testing-library-with-anything/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266978069,"owners_count":24015488,"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-07-25T02:00:09.625Z","response_time":70,"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":["kcd-edu","testingjavascript"],"created_at":"2024-07-31T05:01:09.287Z","updated_at":"2025-07-25T08:10:25.655Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","*.js"],"sub_categories":["Browser"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://testingjavascript.com/courses/use-dom-testing-library-to-test-any-js-framework\"\u003eUse DOM Testing Library to test any JS framework\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\u003ca href=\"https://testingjavascript.com\"\u003eTestingJavaScript.com\u003c/a\u003e\u003c/h2\u003e\n  \u003ca href=\"https://testingjavascript.com\"\u003e\n    \u003cimg\n      width=\"500\"\n      alt=\"Learn the smart, efficient way to test any JavaScript application.\"\n      src=\"https://kentcdodds.com/images/testingjavascript-promo/tjs-4.jpg\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\nAnything you can render to the DOM, you can test with DOM Testing Library.\n\nThis repo is a bunch of simple examples of using DOM Testing Library to test a\n`Counter` component in various frameworks. If your framework of choice is not\nlisted here, please add it!\n\n## Contributing\n\n\u003e NOTE: In the interest of full disclosure, this repository will be used by me\n\u003e to create a course on testing for which I will be paid.\n\nThe prime example is this react version:\n\n```javascript\n// adds handy assertions we'll use\nimport '@testing-library/jest-dom/extend-expect'\n\n// framework imports\nimport * as React from 'react'\nimport ReactDOM from 'react-dom'\n\n// DOM Testing Library utilities\n// note: if your framework does not apply updates to the DOM synchronously\n// then you can use the userEventAsync export in ./user-event-async.js\n// see hyperapp.test.js for an example of this.\nimport {getQueriesForElement} from '@testing-library/dom'\nimport userEvent from '@testing-library/user-event'\n\n// the component in your framework\nfunction Counter() {\n  const [count, setCount] = React.useState(0)\n  const increment = () =\u003e setCount(c =\u003e c + 1)\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={increment}\u003e{count}\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n// a generic \"render\" method that you could use for any component for\n// your framework\nfunction render(ui) {\n  const container = document.createElement('div')\n  document.body.appendChild(container)\n  ReactDOM.render(ui, container)\n  return {\n    container,\n    ...getQueriesForElement(container),\n  }\n}\n\n// the test.\n// This test _should_ look almost identical between each framework\n// that's the idea that I'm trying to get across in this repo!\ntest('renders a counter', () =\u003e {\n  const {getByText} = render(\u003cCounter /\u003e)\n  const counter = getByText('0')\n  userEvent.click(counter)\n  expect(counter).toHaveTextContent('1')\n\n  userEvent.click(counter)\n  expect(counter).toHaveTextContent('2')\n})\n```\n\nIf you can make your example resemble that, I would be thrilled :)\n\n### IMPORTANT Notes\n\nI want to keep things as simple as possible, but I also want to be true to\nwhat's typical for a given framework. If your framework strongly encourages the\nuse of TypeScript for example, then please feel free to use TypeScript (Jest\nshould already be configured to pick it up properly).\n\nIf Jest is not the testing framework of choice for your web framework, I'd still\nprefer to stick with Jest. Hopefully it shouldn't make much of a difference for\nthe test itself.\n\nTry really hard to keep everything in a single file, even if that means\nauthoring your component in a slightly non-typical way.\n\nThis project is setup with prettier, husky, and lint-staged. That means that\nwhen you commit, a git commit hook will automatically format the files you're\nchanging and run the tests relevant to those files. Neat right?\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fdom-testing-library-with-anything","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fdom-testing-library-with-anything","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fdom-testing-library-with-anything/lists"}