{"id":15507070,"url":"https://github.com/kpfromer/react-component-setup","last_synced_at":"2026-04-09T12:33:50.863Z","repository":{"id":91852689,"uuid":"137371106","full_name":"kpfromer/react-component-setup","owner":"kpfromer","description":"A simple npm package to help test react components","archived":false,"fork":false,"pushed_at":"2020-03-27T18:49:01.000Z","size":121,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T10:08:18.297Z","etag":null,"topics":["chai","enzyme","javascript","jest","mocha","react","reactjs","testing","testing-tools"],"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/kpfromer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-14T14:46:19.000Z","updated_at":"2018-07-03T09:05:20.000Z","dependencies_parsed_at":"2023-06-07T21:45:49.593Z","dependency_job_id":null,"html_url":"https://github.com/kpfromer/react-component-setup","commit_stats":{"total_commits":43,"total_committers":1,"mean_commits":43.0,"dds":0.0,"last_synced_commit":"4a1348e780bb7d52e7b4467f5e5c159ed470ddda"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpfromer%2Freact-component-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpfromer%2Freact-component-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpfromer%2Freact-component-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpfromer%2Freact-component-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kpfromer","download_url":"https://codeload.github.com/kpfromer/react-component-setup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246083252,"owners_count":20720931,"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":["chai","enzyme","javascript","jest","mocha","react","reactjs","testing","testing-tools"],"created_at":"2024-10-02T09:29:43.041Z","updated_at":"2025-12-30T21:53:33.918Z","avatar_url":"https://github.com/kpfromer.png","language":"JavaScript","readme":"# react-component-setup\n\n[![Build Status](https://travis-ci.org/kpfromer/react-component-setup.svg?branch=master)](https://travis-ci.org/kpfromer/react-component-setup)\n[![Coveralls github](https://img.shields.io/coveralls/github/kpfromer/react-component-setup.svg)](https://coveralls.io/github/kpfromer/react-component-setup?branch=master)\n\n## Description\n\nThis package reduces component testing boilerplate code by providing a handy `mount` and `shallow` functions using enzyme.\n\n## Installation\n\nRun the following command:\n\n`npm install --save-dev react-component-setup`\n\n## Why?\n\nI read an [article by Tomasz Bak](https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12)\ndescribing some best react practices. One practice described that you should use a setup() instead\nof a beforeEach (in jest) for your code to be more readable. I liked this practice and incorporated into one of my projects.\nHowever, immediately, it became tedious to write a setup() for every component; thus I created `react-component-setup`.\n\n## Usage\n\nFirst, install the [required packages](#requirements)!\n\nImport the package:\n\n```javascript\nimport { SetupComponent } from 'react-component-setup';\n```\n\nThen run the `SetupComponent` initially in your Reactjs test file to generate\ndefault properties and automatic element fetching.\n\n`SetupComponent` will return an object with `mount` and `shallow` functions.\nEach of which corresponds with their respective enzyme call. Example return:\n\n```javascript\n{\n    mount: [mount Function],\n    shalllow: [shallow Function]\n}\n```\n\n```javascript\nimport React, { Component } from 'react';\nimport { SetupComponent } from 'react-component-setup';\n\nclass CoolReactComponent extends Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003ch1\u003eHello, world!\u003c/h1\u003e\n                \u003cp\u003eI am a cool react component\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nconst { shallow: setup } = SetupComponent({ component: CoolReactComponent }); // Component to construct\n// I could have used mount instead of shallow if needed\n```\n\nNote that the `{ shallow: setup } = ...` is just a [javascript object deconstructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).\n\nThen add a simple test using whatever testing framework you want, in this case, I used jest.\n\n```javascript\ndescribe('CoolReactComponent', () =\u003e {\n    it('should render a cool component', () =\u003e {\n        const { wrapper } = setup();\n        expect(wrapper.exists()).toBe(true);\n    });\n});\n```\n\nBoth `mount` and `shallow` return an object of `wrapper` which is the enzyme shallow container of the constructed component.\n\n#### Defining properties for the component\n\nMost components have properties. In order to supply your properties to the component provide an object with\nthe properties value. Example:\n\n```javascript\nimport React, { Component } from 'react';\nimport { SetupComponent } from 'react-component-setup';\n\nclass NameDisplayer extends Component {\n    render() {\n        return (\n            \u003ch1\u003eFirst name: {this.props.firstName}. Last name: {this.props.lastName}.\u003c/h1\u003e\n        );\n    }\n}\n\nconst { shallow: setup } = SetupComponent({ component: NameDisplayer });\n\nsetup({\n    firstName: 'Mark'\n    lastName: 'Johnson'\n}); // returns component like \u003ch1\u003eFirst name: Mark. Last name: Johnson.\u003c/h1\u003e\n```\n\n#### Find an element automatically\n\nIf you want to find an element automatically (you test that element quite often)\nYou can add it to the `SetupComponent`'s elementsToFind list.\nAll elementsToFind does is it returns the `wrapper.find()` of the `query` using the `name`.\nExample:\n\n```javascript\nimport React, { Component } from 'react';\nimport { SetupComponent } from 'react-component-setup';\n\nclass CoolReactComponent extends Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003ch1\u003eHello, world!\u003c/h1\u003e\n                \u003cp className=\"cool-paragraph\"\u003eI am a cool react component\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nconst { shallow: setup } = SetupComponent({\n    component: CoolReactComponent,\n    elementsToFind: [ // the elements that should be found automatically\n        {\n            name: 'coolParagraph',\n            query: '.cool-paragraph'\n        }\n    ]\n});\n\ndescribe('CoolReactComponent', () =\u003e {\n    it('should render a chill paragraph', () =\u003e {\n        const { coolParagraph } = setup(); // coolParagraph is from the name in the list\n        expect(coolParagraph.html()).toMatchSnapshot();\n    });\n});\n```\n\n#### Refreshing elements in `elementsToFind`\n\nI have had trouble using elementsToFind with inputs when simulating a change.\nSimulating a change on input causes any variable reference to the element to become stale, thus the variable is useless since you will need to reuse the `wrapper.find` method.\nSee more [here](https://github.com/airbnb/enzyme/issues/76#issuecomment-388112899).\nTo fix this issue a newly created `refresh` method has been added to automatically refind the element for you.\n\nBasic Example:\n\n```javascript\nconst { wrapper, coolCustomElementToFind, refresh } = setup(); // setup is the the shallow or mount function created from SetupComponent\n\nconst refreshedCustomElement = refresh(coolCustomElementToFind); // refresh does not change coolCustomElementToFind\n\n```\n\nFull Example:\n\n```javascript\nimport React, { Component } from 'react';\nimport { SetupComponent } from 'react-component-setup';\n\nclass InputComponent extends Component {\n\n  state = {\n    val: 'unchanged'\n  };\n\n  changeVal = event =\u003e this.setState({ val: event.target.value });\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003etitle\u003c/h1\u003e\n        \u003cinput value={this.state.val} onChange={this.changeVal} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst { shallow: setup } = setupComponent({\n    component: InputComponent,\n    elementsToFind: [\n      {\n        name: 'input',\n        query: 'input'\n      }\n    ]\n})\n\ndescribe('Component', () =\u003e {\n    it('updates values', () =\u003e {\n        const { input, refresh } = setup();\n\n        input.simulate('change', { target: { value: 'A new input value!' } });\n        // By now the input variable is outdated and it's `props('value')` don't actual match the new value\n        // It needs to be refreshed\n\n        expect(refresh(input).props().value).toBe('A new input value!');\n    });\n});\n```\n\n#### Default Properties\n\nIf you want to add default properties to your component add an object to the `SetupComponent` function. Example:\n\n```javascript\nimport React, { Component } from 'react';\nimport { SetupComponent } from 'react-component-setup';\n\nclass DisplayName extends Component {\n    render() {\n        return (\n            \u003ch1\u003eHello {this.props.name}!\u003c/h1\u003e\n        );\n    }\n}\n\nconst { shallow: setup } = SetupComponent(\n    component: DisplayName,\n    defaultProps: { // the default props for the component\n        name: 'Kyle'\n    }\n);\n\nsetup(); // returns element that is \u003ch1\u003eHello, Kyle!\u003c/h1\u003e\n```\n\nNote: default props will be overridden by props provided in the setup function call.\n\n#### Enzyme shallow and mount options\n\nTo add TODO!\nIf you want to add [enzyme options](https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md#arguments)\nto the shallow or mount command they can be provided similarly to default properties via the `defaultEnzymeOptions`.\n\nExample:\n\n```javascript\nimport { SetupComponent } from 'react-component-setup';\n\nconst { shallow: setup } = SetupComponent(\n    component: ComponentName,\n    defaultEnzymeOptions: {\n        context: {\n            themecolor: '#fff'\n        }\n    }\n);\n```\n\nTo change the options on the fly provide a second argument to shallow/mount function.\n\n```javascript\nimport { SetupComponent } from 'react-component-setup';\n\nconst { shallow: setup } = SetupComponent(\n    component: ComponentName,\n    defaultEnzymeOptions: {\n        context: {\n            themecolor: '#fff'\n        }\n    }\n);\n\nsetup({}, { context: { themecolor: '#different theme color' } )\n```\n\n## Requirements:\n\n1. `react` version ^0.14.9 || ^15.0.0 || ^16.0.0\n2. `react-dom` version ^0.14.9 || ^15.0.0 || ^16.0.0\n3. `enzyme` version ~3.3.0\n\n## License\n\n  react-component-setup is [MIT licensed](LICENSE).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpfromer%2Freact-component-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkpfromer%2Freact-component-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpfromer%2Freact-component-setup/lists"}