{"id":13725999,"url":"https://github.com/sunesimonsen/react-dom-testing","last_synced_at":"2025-03-27T07:31:35.411Z","repository":{"id":65412039,"uuid":"125572571","full_name":"sunesimonsen/react-dom-testing","owner":"sunesimonsen","description":"A tiny wrapper around react-dom/test-utils to make it more convenient.","archived":false,"fork":false,"pushed_at":"2024-10-31T23:04:02.000Z","size":67,"stargazers_count":37,"open_issues_count":11,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T21:03:45.028Z","etag":null,"topics":[],"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/sunesimonsen.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-16T21:39:28.000Z","updated_at":"2024-10-31T09:54:37.000Z","dependencies_parsed_at":"2024-06-18T21:21:54.552Z","dependency_job_id":"7263e8bb-65b8-4b1d-bf62-b2fb70b2988e","html_url":"https://github.com/sunesimonsen/react-dom-testing","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.109375,"last_synced_commit":"366ae6f190ce6861c119c3ae05b75726c5574212"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunesimonsen%2Freact-dom-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunesimonsen%2Freact-dom-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunesimonsen%2Freact-dom-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunesimonsen%2Freact-dom-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sunesimonsen","download_url":"https://codeload.github.com/sunesimonsen/react-dom-testing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245802697,"owners_count":20674727,"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":[],"created_at":"2024-08-03T01:02:46.615Z","updated_at":"2025-03-27T07:31:30.393Z","avatar_url":"https://github.com/sunesimonsen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-dom-testing\n\n[![Build Status](https://travis-ci.org/sunesimonsen/react-dom-testing.svg?branch=master)](https://travis-ci.org/sunesimonsen/react-dom-testing)\n\nA minimal React DOM testing utility based on [react-dom/test-utils](https://reactjs.org/docs/test-utils.html).\n\n## Install\n\n```sh\nnpm install --save react-dom-testing\n```\n\n## Platform support\n\nThe library is ES5 compatible and will work with any JavaScript bundler in the browser as well as Node versions with ES5 support.\n\n## Usage\n\nUse the `mount` function to render a React component into the DOM, the function returns the rendered DOM node. Now you can start asserting:\n\n\n```js\nimport { mount } from 'react-dom-testing';\nimport React from 'react';\n\nconst Hello = ({ children }) =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv className=\"label\"\u003eHello:\u003c/div\u003e\n    \u003cdiv className=\"value\" data-test=\"value\"\u003e\n      {children}\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n\nconst node = mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e);\n\nassert.equal(\n  node.querySelector(\"[data-test=value]\").textContent,\n  \"Jane Doe\"\n);\n```\n\nYou can use plain DOM or any DOM query library you want. You can use any fancy assertion library that have assertions for the DOM or just stick to plain asserts, you decide.\n\nHere is the above example using [unexpected-dom](https://github.com/unexpectedjs/unexpected-dom/):\n\n```js\nimport expect from 'unexpected';\nimport unexpectedDom from 'unexpected-dom';\n\nexpect.use(unexpectedDom);\n\nexpect(\n  mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e),\n  \"queried for first\",\n  \"[data-test=value]\",\n  \"to have text\",\n  \"Jane Doe\"\n);\n```\n\nThat will give you some really fancy output if it fails.\n\n## API\n\n### mount\n\nRenders a React component into the DOM and returns the DOM node.\n\n```js\nconst node = mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e);\n```\n\nIn case you want to specify the container element that your component will be\nrendered into, you can do that the following way:\n\n``` js\nconst node = mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e, { container: 'span' });\n```\n\nor\n\n``` js\nconst node = mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e, {\n  container: document.createElement('span')\n});\n```\n\n### unmount\n\nUnmount a mounted component from the DOM. \n\nYou normally don't need to unmount components, it is only when your component has some side-effect that messes with the environment, like writing to the HTML body the unmount need to run to clean up. That of cause depends on the component actually cleaning up after itself.\n\n```js\nconst node = mount(\u003cHello\u003eJane Doe\u003c/Hello\u003e);\nunmount(node);\n```\n\n### simulate\n\nA function to simulate one or more events using `Simulate` object from\n[react-dom/test-utils](https://reactjs.org/docs/test-utils.html).\n\nThe function takes an array of events or a single event. Each event has the\nfollowing form:\n\n```js\n{\n  type: 'change', // The event type\n  value: 'My value', // will be set on target when specified\n  target: 'input', // an optional CSS selector specifying the target\n}\n```\n\nYou can also specify event data for\n[Simulate](https://reactjs.org/docs/test-utils.html#simulate):\n\n```js#evaluate:false\n{\n  type: \"keyDown\",\n  target: \"input\",\n  data: {\n    keyCode: 13\n  }\n}\n```\n\nIf you don't specify a target, the event will be issued on the root element of\nthe given component.\n\nI case you just want to specify the type, you can just give a string instead of\nan event object:\n\n```js\nconst component = mount(\u003cbutton onClick={myHandler}\u003eClick me!\u003c/button\u003e);\n\n// Simulate one click\nsimulate(component, 'click');\n\n// Simulate two clicks\nsimulate(component, ['click', 'click']);\n```\n\n```js\nclass PeopleList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: \"\",\n      people: []\n    };\n  }\n\n  render() {\n    const { name, people } = this.state;\n\n    return (\n      \u003cdiv\u003e\n        \u003col data-test=\"people\"\u003e\n          {people.map((person, i) =\u003e \u003cli key={i}\u003e{person}\u003c/li\u003e)}\n        \u003c/ol\u003e\n\n        \u003clabel\u003e\n          Name:\n          \u003cinput\n            value={name}\n            onChange={e =\u003e this.setState({ name: e.target.value })}\n            data-test=\"name-input\"\n          /\u003e\n        \u003c/label\u003e\n        \u003cbutton\n          onClick={() =\u003e\n            this.setState(({ name, people }) =\u003e ({\n              name: \"\",\n              people: [...people, name]\n            }))\n          }\n          data-test=\"add-person\"\n        \u003e\n          Add\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst peopleList = mount(\u003cPeopleList /\u003e);\n\nsimulate(peopleList, [\n  { type: \"change\", target: \"[data-test=name-input]\", value: \"Jane Doe\" },\n  { type: \"click\", target: \"[data-test=add-person]\" },\n  { type: \"change\", target: \"[data-test=name-input]\", value: \"John Doe\" },\n  { type: \"click\", target: \"[data-test=add-person]\" }\n]);\n\nexpect(\n  peopleList,\n  \"queried for first\",\n  \"[data-test=people]\",\n  \"to satisfy\",\n  mount(\n    \u003col data-test=\"people\"\u003e\n      \u003cli\u003eJane Doe\u003c/li\u003e\n      \u003cli\u003eJohn Doe\u003c/li\u003e\n    \u003c/ol\u003e\n  )\n);\n```\n\n### act\n\nThis is just the https://reactjs.org/docs/test-utils.html#act\n\n`act` is useful when you need to force a state transition like resolving a mocked promise:\n\n```js\nit(\"supports asynchronous components\", () =\u003e {\n  const component = mount(\u003cPromisedAnswer /\u003e);\n\n  expect(component, \"to have text\", \"Waiting...\");\n\n  act(() =\u003e {\n    fakePromise.resolve(\"wat\");\n  });\n\n  expect(component, \"to have text\", \"wat\");\n});\n```\n\nSee the tests for more details.\n\n## License\n\n[MIT © Sune Simonsen](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunesimonsen%2Freact-dom-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunesimonsen%2Freact-dom-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunesimonsen%2Freact-dom-testing/lists"}