{"id":13438295,"url":"https://github.com/Legitcode/tests","last_synced_at":"2025-03-19T18:32:42.189Z","repository":{"id":57289961,"uuid":"42273123","full_name":"Legitcode/tests","owner":"Legitcode","description":"Chainable, easy to read, React testing library","archived":false,"fork":false,"pushed_at":"2016-04-29T14:54:10.000Z","size":146,"stargazers_count":248,"open_issues_count":1,"forks_count":7,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-01T16:20:34.031Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Legitcode.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-09-10T22:05:18.000Z","updated_at":"2024-02-20T13:28:22.000Z","dependencies_parsed_at":"2022-08-25T07:40:57.981Z","dependency_job_id":null,"html_url":"https://github.com/Legitcode/tests","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Ftests","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Ftests/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Ftests/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Ftests/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Legitcode","download_url":"https://codeload.github.com/Legitcode/tests/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221729846,"owners_count":16871126,"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-07-31T03:01:04.339Z","updated_at":"2024-10-27T20:31:56.117Z","avatar_url":"https://github.com/Legitcode.png","language":"JavaScript","readme":"##Legit Tests\n\nThis is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you can use [React's Test Utils](https://facebook.github.io/react/docs/test-utils.html)? Because who likes typing out `scryRenderedDOMComponentsWithTag` and the other method names on there. Not only that, but setting up the render process is also a hassle.\n\n###Install\n\n`npm install legit-tests --save`\n\n##Example\n\n~~~js\nimport Test from 'legit-tests'\n//or\nimport Test from 'legit-tests/no-dom' //don't include jsdom\n\nimport { expect } from 'chai'\nimport sinon from 'sinon'\nimport TestComponent from './TestComponent'\n\nlet spy = sinon.spy()\n\n\n//Calling a prop\nTest(\u003cTestComponent onClick={spy}/\u003e)\n.find('button')\n.simulate({method: 'click', element: 'button'})\n.test(() =\u003e {\n  expect(spy.called).to.be.true\n})\n\n//finding an element\nTest(\u003cTestComponent/\u003e)\n.find('.box')\n.elements('.box', (box) =\u003e {\n  expect(box.props.children).to.be.equal('found me!')\n})\n~~~\n\n##Middleware\n\n[Current list of Middleware](https://github.com/Legitcode/tests/wiki/Bundled-Middleware)\n\nYou can write middleware to do anything you repeatedly use. You can pass `.use` a function, along with an object that it will take in. Each function will be injected with the current instance which includes:\n- `component` - the actual component itself\n- `instance` - the rendered component instance\n- `helpers` - an array you can add on to with data for the end function\n\n**Example**:\n\n- See `mixin` below, this syntax may soon be deprecated\n\nThis is the setState function used above.\n~~~js\n\nTest(\u003cTestComponent onClick={spy}/\u003e)\n.use(SetState, {})\n\n...\n\nexport default function setState(state){\n  this.instance.setState(state)\n}\n~~~\n\n##test\n\nThe `.test` function will be given the component instance and the helpers array. You can use a regular function to reference `this` or an arrow function:\n\n~~~js\n.test(({helpers, instance}) =\u003e { ... })\n.test(function() {\n  //this.instance, this.helpers\n})\n~~~\n\n##element\n\nUse `.element` if you're just testing an element you found with the `.find` method. The syntax is a little smaller:\n\n~~~js\nTest(\u003cTestComponent/\u003e)\n.find('.box')\n.element(box =\u003e {\n  expect(box.props.children).to.be.equal('found me!')\n})\n//or specify the element\n\n.find('.box')\n.find('div')\n.element('.box', box =\u003e {\n  expect(box.props.children).to.be.equal('found me!')\n})\n\n~~~\n\n##mixin\n\nUse `.mixin` if you want to add new middleware as methods to `Test`. This gives a more natural way of using middleware:\n\n~~~js\n// In this example, CustomFind middleware was added to Test by mixin\n// and used if as it was a method on Test itself.\n\nTest(\u003cTestComponent /\u003e)\n.mixin({\n  customFind: CustomFind\n})\n.customFind('cells', 'table td')\n.element('cells', cells =\u003e {\n  expect(cells.length).to.be.equal(10)\n})\n\n~~~\n\n##DOM rendering\n__Shallow__ -- uses React shallow rendering (no DOM)\n~~~js\nTest(\u003cTestComponent onClick={spy}/\u003e, {shallow: true})\n.find('button')\n.simulate({method: 'click', element: 'button'})\n.test(() =\u003e {\n  expect(spy.called).to.be.true\n})\n~~~\n\n__Normal__ -- React render into document fragment\n~~~js\nTest(\u003cTestComponent onClick={spy}/\u003e)\n.find('button')\n.simulate({method: 'click', element: 'button'})\n.test(() =\u003e {\n  expect(spy.called).to.be.true\n})\n~~~\n\n__fullDOM__ -- ReactDOM render into document.body.div of jsdom\n~~~js\nTest(\u003csection /\u003e, {fullDOM: true})\n.test(function() {\n  expect(global.window.document.querySelector('section'))\n  .to.be.okay\n})\n.clean() // restores the document.body to empty\n~~~ \n\nYou can see more examples in the tests directory.\n\n##Testing Alt Stores\n\nYou can now test [Alt](http://alt.js.org/) stores using the same API.\n\n~~~js\nimport TestStore from 'legit-tests/alt/store'\n\nTestStore(MyStore, MyActions)\n.setInitialState({ todos: todos })\n.addTodo({ title: \"Get Beer\", complete: false })\n.test(({ state }) =\u003e {\n  expect(state.todos).to.eql(expected);\n})\n~~~\n\nYou can see the [full documentation on the Wiki](https://github.com/Legitcode/tests/wiki/Alt-Stores)\n","funding_links":[],"categories":["Uncategorized","Dev Tools"],"sub_categories":["Uncategorized","Test"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLegitcode%2Ftests","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLegitcode%2Ftests","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLegitcode%2Ftests/lists"}