{"id":19622159,"url":"https://github.com/commercetools/enzyme-extensions","last_synced_at":"2025-04-28T03:32:25.082Z","repository":{"id":32459100,"uuid":"133677120","full_name":"commercetools/enzyme-extensions","owner":"commercetools","description":"🎩 Enzyme extensions to test shallowly rendered enzyme wrappers 🏄🏻","archived":false,"fork":false,"pushed_at":"2023-07-11T00:08:53.000Z","size":1413,"stargazers_count":30,"open_issues_count":12,"forks_count":0,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-04-20T15:17:57.753Z","etag":null,"topics":["enzyme","jest","react","testing"],"latest_commit_sha":null,"homepage":"https://medium.com/@dferber90/test-a-render-prop-6a44e02f4c39","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/commercetools.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-05-16T14:21:47.000Z","updated_at":"2021-06-22T23:58:07.000Z","dependencies_parsed_at":"2024-06-18T22:48:07.973Z","dependency_job_id":"0556da2e-8f17-4f8a-a423-8187c275a44d","html_url":"https://github.com/commercetools/enzyme-extensions","commit_stats":{"total_commits":60,"total_committers":4,"mean_commits":15.0,"dds":0.55,"last_synced_commit":"da3451bfa470507c11a6dda4c6af22a5ad025a5f"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fenzyme-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fenzyme-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fenzyme-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fenzyme-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commercetools","download_url":"https://codeload.github.com/commercetools/enzyme-extensions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251246388,"owners_count":21558762,"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":["enzyme","jest","react","testing"],"created_at":"2024-11-11T11:26:18.341Z","updated_at":"2025-04-28T03:32:24.427Z","avatar_url":"https://github.com/commercetools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://commercetools.com/\"\u003e\n    \u003cimg alt=\"commercetools logo\" src=\"http://cdn.rawgit.com/commercetools/press-kit/master/PNG/72DPI/CT%20logo%20chrom%20black%20horizontal%20RGB%2072dpi.png\"\u003e\n  \u003c/a\u003e\n  \u003cb\u003e@commercetools/enzyme-extensions\u003c/b\u003e\u003cbr /\u003e\u003cbr /\u003e\n\n  \u003cimg height=\"100\" alt=\"Logo\" src=\"https://raw.githubusercontent.com/commercetools/enzyme-extensions/master/logo.jpeg\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/commercetools/enzyme-extensions\"\u003e\n    \u003cimg alt=\"CircleCI Status\" src=\"https://circleci.com/gh/commercetools/enzyme-extensions.svg?style=shield\u0026circle-token=e58fc71dcfcab717a3ab1e529da76ab127d33a5e\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/commercetools/enzyme-extensions\"\u003e\n    \u003cimg alt=\"Codecov Coverage Status\" src=\"https://img.shields.io/codecov/c/github/commercetools/enzyme-extensions.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@commercetools/enzyme-extensions\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/@commercetools/enzyme-extensions.svg?style=flat-square\"\" alt=\"Downloads per Week\" /\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"Made with Coffee\" src=\"https://img.shields.io/badge/made%20with-%E2%98%95%EF%B8%8F%20coffee-yellow.svg\"\u003e\n  \u003cbr /\u003e\u003cbr /\u003e\n  Why should you use this? Read: \u003ca href=\"https://medium.com/@dferber90/test-a-render-prop-6a44e02f4c39\"\u003e\n    Test a Render Prop!\n  \u003c/a\u003e\u003cbr /\u003e\u003cbr /\u003e\n\u003c/p\u003e\n\n\u003e **NOTE** This package used to provide a `renderProp` test helper, which [is now part of `enzyme` itself](https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md#380) as of v3.8.0 🎈.\n\u003e\n\u003e We therefore dropped `renderProp` in v4.0.0 of this package. We recommend to use `renderProp` from enzyme itself instead.\n\u003e\n\u003e Be aware that [the API has changed](https://github.com/airbnb/enzyme/pull/1891#issue-228765309) while moving the function to enzyme.\n\u003e\n\u003e ```js\n\u003e // before\n\u003e wrapper.renderProp('foo', 10, 20);\n\u003e // after\n\u003e wrapper.renderProp('foo')(10, 20);\n\u003e ```\n\u003e\n\u003e \u003cimg src=\"https://cultofthepartyparrot.com/parrots/parrot.gif\" alt=\"party-parrot\" /\u003e We are happy that our little helper has made it into `enzyme`.\n\n## What assumptions is this built with?\n\n- We _like to shallow render_ and avoid mounting\n  - 🤺 Shallow rendering is fast and ensures that you only interact with the _unit under test_\n  - 🏙 Shallow rendering ensures that you do _not snapshot past your test's concern_\n  - 🏎 Shallow rendering has shown to be _more performant_ for us than mounting\n- We like _declarative components_ and _Render Props_\n  - 🧠 We can _compose components_ easily while following along their interactions\n  - 🔪 We like _stubbing_ to test individual pieces of logic\n\n## Installation\n\n### 1. Add package\n\n`yarn add @commercetools/enzyme-extensions -D`\n\n### 2. Add a test setup file (test runner dependent)\n\nFor Jest you would set up a [`setupTestFrameworkScriptFile`](https://facebook.github.io/jest/docs/configuration.html#setuptestframeworkscriptfile-string).\nCreate that file and add it to the jest configuration.\n\n### 3. Extend Enzyme with this package's helpers\n\nIn that `testFrameworkScriptFile` file, import the extensions and add them to Enzyme\n\n```js\nimport Enzyme from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-xx';\nimport configure from '@commercetools/enzyme-extensions';\nimport ShallowWrapper from 'enzyme/ShallowWrapper';\n\n// You likely had this part already\nEnzyme.configure({ adapter: new Adapter() });\n\n// This is the actual integration.\n// Behind the scenes this extends the prototype of the passed in `ShallowWrapper`\nconfigure(ShallowWrapper);\n```\n\n## Usage\n\nOnce set up, you can use the extension in your test files like this:\n\n```js\nimport React from 'react';\nimport { shallow } from 'enzyme';\n\ndescribe('when rendering `\u003cApp\u003e`', () =\u003e {\n  const App = () =\u003e (\n    \u003cdiv id=\"app\"\u003e\n      \u003cMouse\n        render={(x, y) =\u003e (\n          \u003cdiv\u003e\n            Cursor is at {x} {y}\n          \u003c/div\u003e\n        )}\n      /\u003e\n    \u003c/div\u003e\n  );\n\n  // Here we call the render function defined on Mouse and we provide\n  // some custom arguments to it. This means we are effectively mocking\n  // the Mouse component's implementation.\n  // This is great to keep test concerns separate.\n  const wrapper = shallow(\u003cApp /\u003e)\n    .find(Mouse)\n    // This is where we are actually using the drill function\n    // Since we defined it on the prototype in the Installation step,\n    // it does not need to be imported into the test itself.\n    // We can call any property dynamically and even derive the property to\n    // call depending on the props which are passed as the arguments of the\n    // function passed to `drill`.\n    .drill(props =\u003e props.render(10, 20));\n\n  it('should render the mouse position', () =\u003e {\n    expect(wrapper.equals(\u003cdiv\u003eCursor is at 10 20\u003c/div\u003e)).toBe(true);\n  });\n});\n```\n\nEnzyme's `renderProp` is built as an easy to use test helper for the most common cases.\nIn case you need more control, you can use `drill` instead. `drill` offers more flexibility as:\n\n- the prop-to-call can be derived from the other props\n- the returned element can be set dynamically\n\nSee the [`drill`](docs/drill.md) documentation for more.\n\n## Documentation\n\n- [`drill`](docs/drill.md)\n- [`until`](docs/until.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fenzyme-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommercetools%2Fenzyme-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fenzyme-extensions/lists"}