{"_id":"@capitalg/preact-testing-library","_rev":"1-adecaeccf702d4911cebb6dfe84fb41a","name":"@capitalg/preact-testing-library","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@capitalg/preact-testing-library","version":"1.0.0","description":"Simple and complete Preact DOM testing utilities that encourage good testing practices.","main":"dist/index.js","typings":"typings/index.d.ts","engines":{"node":">=8"},"scripts":{"add-contributor":"kcd-scripts contributors add","build":"kcd-scripts build","lint":"kcd-scripts lint","test":"kcd-scripts test","test:update":"npm test -- --updateSnapshot --coverage","validate":"kcd-scripts validate","setup":"npm install && npm run validate -s","precommit":"kcd-scripts precommit","semantic-release":"semantic-release","travis-deploy-once":"travis-deploy-once"},"keywords":["testing","preact","ui","dom","jsdom","unit","integration","functional","end-to-end","e2e"],"author":{"name":"Anto Aravinth"},"license":"MIT","dependencies":{"@babel/runtime":"^7.1.5","@testing-library/dom":"^5.2.0","babel-plugin-module-resolver":"^2.7.1","jest-dom":"^2.1.0","wait-for-expect":"0.4.0"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/plugin-transform-react-jsx":"^7.0.0","@babel/preset-env":"^7.1.0","axios":"^0.18.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint-config-standard":"^12.0.0","eslint-config-standard-preact":"^1.1.6","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^21.26.2","eslint-plugin-node":"^8.0.0","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.11.1","eslint-plugin-standard":"^4.0.0","history":"^4.7.2","jest-in-case":"^1.0.2","jsdom":"11.11.0","kcd-scripts":"^0.45.0","preact":"^8.2.7","preact-redux":"^2.0.3","redux":"^3.7.2","semantic-release":"^15.5.1","travis-deploy-once":"^5.0.0"},"eslintConfig":{"extends":["standard","standard-preact"],"plugins":["jest"],"env":{"jest/globals":true},"rules":{"import/named":"off","import/no-unassigned-import":"off","react/react-in-jsx-scope":"off","react/prefer-stateless-function":"off","react/prop-types":"off","no-empty-pattern":"off","space-before-function-paren":"off","comma-dangle":"off","object-curly-spacing":"off","jsx-quotes":"off","spaced-comment":"off"}},"eslintIgnore":["node_modules","coverage","dist"],"jest":{"transform":{"^.+\\.jsx?$":"babel-jest"},"testEnvironment":"jsdom","moduleFileExtensions":["js","jsx"]},"repository":{"type":"git","url":"git+https://github.com/capitalg/preact-testing-library.git"},"bugs":{"url":"https://github.com/capitalg/preact-testing-library/issues"},"homepage":"https://github.com/capitalg/preact-testing-library#readme","gitHead":"592a414093849b7528702e8fcbafab8fe89dd417","_id":"@capitalg/preact-testing-library@1.0.0","_nodeVersion":"11.14.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vW6P87EqJd5KiKVLOw0jQMOt/5QVhYjWh8WyLJygqS7RLGQCMNroY8jrHtWYVj568GIfBnEjatN4lwoSed2cRA==","shasum":"58be0ee25f304117ec1735d62f947eec0257e2aa","tarball":"https://registry.npmjs.org/@capitalg/preact-testing-library/-/preact-testing-library-1.0.0.tgz","fileCount":16,"unpackedSize":51163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAGqYCRA9TVsSAnZWagAATe8P+gJNH1wG9LaVGzmjxcEx\ni1ipUEtjC5K1cq4c72rRmYygKaWV3f67eEdoL3sWuMSpsiFhouWPKhF3XeG8\nU8rd8cst9rwCDgnY+b/Jk/8Ac9uSNacnVk5x9hBGHZ5MX1NwHQ//l9L9iOGu\n2Ld8ZfLi3F1/553Dtg9KTVxUQ7chD+8Bc1z6EF+mp+swHHrO+q0soqtrAZXA\nfkHgaLT/BN5abYMeWfzuapxsBiOaZjq6HXHgJzM1xLYmcZHnpS71MqIqSN0S\nkG4F3EpNT9V9ngYlaRGpUz+r10ny+1JwnvaBgHnffazaz6nxlHv+OTuLPVL0\no6E/wQtXgWXdD9lzS0hBJ7bx/8HxahG+nWMd16Hxem6n/AQLSat/rz+M+nRp\nRVey+7BqhpluCWOJm36QZK4VwpURBAK8w2xVIMHP8y5RH/QhjVXgE2mHarqQ\nKG4KPQoXVKRR1LYsGfhNYc4nDirZ6IZvPrsoT4qSGXeIWpiKaSarZiorneQY\nnE5m0wy7dM1ZOWBDFhD2j+8Ue0ln5/zL8qUcgjNHs0R8nkXGeV1KhGM68P/S\nEtaYosFNgGgz6LczQPzfHO37fb7/t0LzE4L4VXBIb4QAzhBFeMGJIwPHhUKq\nzc93ktwLtBKvBtcUIOyUMpcIuzIIJO0sOiLJcvHkvbkZtM5M59tOEHAyypZR\nJ2OS\r\n=tx/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQiu8QVFHaEos/09HWPvdnLshjjKf7bO2eVHghrkg8/AiEAv4FGx9ZEaIVoRaJdloaxScsuR7xeXKIhRfE25IPUlz8="}]},"maintainers":[{"name":"capitalg","email":"gurkaran.poonia@gmail.com"}],"_npmUser":{"name":"capitalg","email":"gurkaran.poonia@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/preact-testing-library_1.0.0_1560308375487_0.15339093936701542"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-12T02:59:35.447Z","1.0.0":"2019-06-12T02:59:35.634Z","modified":"2022-04-04T21:45:59.439Z"},"maintainers":[{"name":"capitalg","email":"gurkaran.poonia@gmail.com"}],"description":"Simple and complete Preact DOM testing utilities that encourage good testing practices.","homepage":"https://github.com/capitalg/preact-testing-library#readme","keywords":["testing","preact","ui","dom","jsdom","unit","integration","functional","end-to-end","e2e"],"repository":{"type":"git","url":"git+https://github.com/capitalg/preact-testing-library.git"},"author":{"name":"Anto Aravinth"},"bugs":{"url":"https://github.com/capitalg/preact-testing-library/issues"},"license":"MIT","readme":"
\n
preact-testing-library
\n\n
Simple and complete Preact DOM testing utilities that encourage good testing practices.
\n
\n\n\n\n## The problem\n\nYou want to write maintainable tests for your Preact components. As a part of\nthis goal, you want your tests to avoid including implementation details of\nyour components and rather focus on making your tests give you the confidence\nfor which they are intended. As part of this, you want your testbase to be\nmaintainable in the long run so refactors of your components (changes to\nimplementation but not functionality) don't break your tests and slow you and\nyour team down.\n\n## This solution\n\nThe `preact-testing-library` is a very light-weight solution for testing Preact\ncomponents. It provides light utility functions on top of `preact` in a way that encourages better testing practices.\nIt's primary guiding principle is:\n\n> [The more your tests resemble the way your software is used, the more confidence they can give you.][guiding-principle]\n\nSo rather than dealing with instances of rendered Preact components, your tests\nwill work with actual DOM nodes. The utilities this library provides facilitate\nquerying the DOM in the same way the user would. Finding for elements by their\nlabel text (just like a user would), finding links and buttons from their text\n(like a user would). It also exposes a recommended way to find elements by a\n`data-testid` as an \"escape hatch\" for elements where the text content and label\ndo not make sense or is not practical.\n\nThis library encourages your applications to be more accessible and allows you\nto get your tests closer to using your components the way a user will, which\nallows your tests to give you more confidence that your application will work\nwhen a real user uses it.\n\nThis library is a replacement for [enzyme](http://airbnb.io/enzyme/). While you\n_can_ follow these guidelines using enzyme itself, enforcing this is harder\nbecause of all the extra utilities that enzyme provides (utilities which\nfacilitate testing implementation details). Read more about this in\n[the FAQ](#faq) below.\n\n**What this library is not**:\n\n1. A test runner or framework\n2. Specific to a testing framework (though we recommend Jest as our\n preference, the library works with any framework)\n\n> NOTE: This library is built on top of\n> [`dom-testing-library`](https://github.com/kentcdodds/dom-testing-library)\n> which is where most of the logic behind the queries is. Also this is inspired from\n> [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)\n\n## Table of Contents\n\n\n\n\n- [Installation](#installation)\n- [Usage](#usage)\n - [`render`](#render)\n - [`cleanup`](#cleanup)\n - [`wait`](#wait)\n - [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)\n- [`debounceRenderingOff`](#debouncerenderingoff)\n- [`TextMatch`](#textmatch)\n- [`query` APIs](#query-apis)\n- [FAQ](#faq)\n- [Guiding Principles](#guiding-principles)\n\n\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `devDependencies`:\n\n```\nnpm install --save-dev preact-testing-library\n```\n\nYou may also be interested in installing `dom-testing-library` so you can use\n[the custom jest matchers](https://github.com/kentcdodds/dom-testing-library/blob/master/README.md#custom-jest-matchers)\n\n## Usage\n\n```javascript\n// __tests__/fetch.js\nimport preact from 'preact'\nimport {render, flushPromises, FireEvent} from '../'\nimport axiosMock from 'axios' // the mock lives in a __mocks__ directory\nimport Fetch from '../fetch' // see the tests for a full implementation\n\ntest('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {\n // Arrange\n axiosMock.get.mockImplementationOnce(() =>\n Promise.resolve({\n data: {greeting: 'hello there'},\n }),\n )\n const url = '/greeting'\n const {getByText} = render()\n\n // Act\n FireEvent.fireEvent(getByText('Fetch'), 'click')\n\n await flushPromises()\n\n // Assert\n expect(axiosMock.get).toHaveBeenCalledTimes(1)\n expect(axiosMock.get).toHaveBeenCalledWith(url)\n // this assertion is funny because if the textContent were not \"hello there\"\n // then the `getByText` would throw anyway... 🤔\n expect(getByText('hello there').textContent).toBe('hello there')\n // expect(container.firstChild).toMatchSnapshot()\n})\n```\n\n### `render`\n\nRender into a container which is appended to document.body. It should be used with [cleanup](#cleanup):\n\n```javascript\nimport {render, cleanup} from 'preact-testing-library'\n\nafterEach(cleanup)\n\nrender()\n```\n\nIn the example above, the `render` method returns an object that has a few\nproperties:\n\n#### `container`\n\nThe containing DOM node of your rendered Preact Element (rendered using\n`Preact.render`). It's a `div`. This is a regular DOM node, so you can call\n`container.querySelector` etc. to inspect the children.\n\n> Tip: To get the root element of your rendered element, use `container.firstChild`.\n\n#### `debug`\n\nThis method is a shortcut for `console.log(prettyDOM(container))`.\n\n```javascript\nimport {render} from 'preact-testing-library'\n\nconst HelloWorld = () =>
Hello World
\nconst {debug} = render()\ndebug()\n//
\n//
Hello World
\n//
\n// you can also pass an element: debug(getByTestId('messages'))\n```\n\nThis is a simple wrapper around prettyDOM which is also exposed and comes from [dom-testing-library](https://github.com/kentcdodds/dom-testing-library/blob/master/README.md#prettydom).\n\n#### `rerender`\n\nIt'd probably be better if you test the component that's doing the prop updating to ensure that the props are being updated correctly (see the Guiding Principles section). That said, if you'd prefer to update the props of a rendered component in your test, this function can be used to update props of the rendered component.\n\n```javascript\nimport {render} from 'preact-testing-library'\n\nconst {rerender} = render()\n\n// re-render the same component with different props\nrerender()\n```\n\n#### `unmount`\n\nThis will cause the rendered component to be unmounted. This is useful for\ntesting what happens when your component is removed from the page (like testing\nthat you don't leave event handlers hanging around causing memory leaks).\n\n> This method is a pretty small abstraction over\n> `render(ui, document.body, container)`\n\n```javascript\nconst {container, unmount} = render()\nunmount()\n// your component has been unmounted and now: container.innerHTML === ''\n```\n\n#### `getByLabelText(text: TextMatch, options: {selector: string = '*'}): HTMLElement`\n\nThis will search for the label that matches the given [`TextMatch`](#textmatch),\nthen find the element associated with that label.\n\n```javascript\nconst inputNode = getByLabelText('Username')\n\n// this would find the input node for the following DOM structures:\n// The \"for\" attribute (NOTE: in JSX with React you'll write \"htmlFor\" rather than \"for\")\n// \n// \n//\n// The aria-labelledby attribute\n// \n// \n//\n// Wrapper labels\n// \n//\n// It will NOT find the input node for this:\n// \n//\n// For this case, you can provide a `selector` in the options:\nconst inputNode = getByLabelText('username', {selector: 'input'})\n// and that would work\n// Note that will also work, but take\n// care because this is not a label that users can see on the page. So\n// the purpose of your input should be obvious for those users.\n```\n\n> Note: This method will throw an error if it cannot find the node. If you don't\n> want this behavior (for example you wish to assert that it doesn't exist),\n> then use `queryByLabelText` instead.\n\n#### `getByPlaceholderText(text: TextMatch): HTMLElement`\n\nThis will search for all elements with a placeholder attribute and find one\nthat matches the given [`TextMatch`](#textmatch).\n\n```javascript\n// \nconst inputNode = getByPlaceholderText('Username')\n```\n\n> NOTE: a placeholder is not a good substitute for a label so you should\n> generally use `getByLabelText` instead.\n\n#### `getByText(text: TextMatch): HTMLElement`\n\nThis will search for all elements that have a text node with `textContent`\nmatching the given [`TextMatch`](#textmatch).\n\n```javascript\n// About ℹ️\nconst aboutAnchorNode = getByText('about')\n```\n\n#### `getByAltText(text: TextMatch): HTMLElement`\n\nThis will return the element (normally an ``) that has the given `alt`\ntext. Note that it only supports elements which accept an `alt` attribute:\n[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img),\n[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input),\nand [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area)\n(intentionally excluding [`