{"id":20826731,"url":"https://github.com/cedrickchee/react-typescript-jest-enzyme-testing","last_synced_at":"2025-08-12T18:15:00.603Z","repository":{"id":41784544,"uuid":"143156996","full_name":"cedrickchee/react-typescript-jest-enzyme-testing","owner":"cedrickchee","description":"Testing React.JS + TypeScript component with Jest and Enzyme. A simple example for reference.","archived":false,"fork":false,"pushed_at":"2022-12-09T09:22:13.000Z","size":1145,"stargazers_count":48,"open_issues_count":7,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T20:38:48.275Z","etag":null,"topics":["educational","enzyme-testing","jest-tests","reactjs","typescript-exercises"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/cedrickchee.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}},"created_at":"2018-08-01T13:04:09.000Z","updated_at":"2025-02-21T15:50:36.000Z","dependencies_parsed_at":"2023-01-25T21:00:50.866Z","dependency_job_id":null,"html_url":"https://github.com/cedrickchee/react-typescript-jest-enzyme-testing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cedrickchee/react-typescript-jest-enzyme-testing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-typescript-jest-enzyme-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-typescript-jest-enzyme-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-typescript-jest-enzyme-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-typescript-jest-enzyme-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedrickchee","download_url":"https://codeload.github.com/cedrickchee/react-typescript-jest-enzyme-testing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-typescript-jest-enzyme-testing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270110491,"owners_count":24529082,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["educational","enzyme-testing","jest-tests","reactjs","typescript-exercises"],"created_at":"2024-11-17T23:09:52.981Z","updated_at":"2025-08-12T18:15:00.573Z","avatar_url":"https://github.com/cedrickchee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jest and Enzyme Testing with TypeScript\n\nThis is an example (for reference purposes) on how to use Jest and Enzyme to test React.JS 16.x component developed in TypeScript 2.x.\n\nJest is a decent unit testing option which provides great TypeScript support.\n\n## Getting Started\n\n1. Clone this repo:\n\n```sh\ngit clone https://github.com/cedrickchee/react-typescript-jest-enzyme-testing react-typescript\ncd react-typescript\n```\n\n2. Install project dependencies:\n\n```sh\nyarn\n\n# If you are using NPM\nnpm install\n```\n3. Start Jest to run tests:\n\n```sh\n# start Jest in watch mode\nyarn test -- --watch\n\n# or if you are using NPM\nnpm t -- --watch\n```\n\n4. There is no step 4. You can start developing your React component and write unit test along the way.\n\n# Project\n\nHow's this project was created? From a clean project setup, here are the steps to recreate this example:\n\n- **Step 0: Pre-requisite**\n\nInstall React.JS and TypeScript:\n\n```sh\nyarn add react react-dom typescript\n\n# or if you are using NPM\nnpm i react react-dom typescript\n```\n\n- **Step 1: Install Jest**\n\nInstall the following using yarn/npm:\n\n```sh\nyarn add jest @types/jest ts-jest --dev\n\n# or if you are using NPM\nnpm i jest @types/jest ts-jest -D\n```\n\nExplanation:\n\n- Install Jest framework (`jest`).\n- Install the types for Jest (`@types/jest`).\n- Install the TypeScript preprocessor for Jest (`ts-jest`) which allows jest to transpile TypeScript on the fly and have source-map support built in.\n- Save all of these to your dev dependencies (testing is almost always a npm dev-dependency).\n\n- **Step 2: Configure Jest**\n\nAdd the following `jest.config.js` file to the root of your project:\n\n```javascript\nmodule.exports = {\n  \"roots\": [\n    \"\u003crootDir\u003e/src\"\n  ],\n  \"transform\": {\n    \"^.+\\\\.tsx?$\": \"ts-jest\"\n  },\n  \"testRegex\": \"(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.tsx?$\",\n  \"moduleFileExtensions\": [\n    \"ts\",\n    \"tsx\",\n    \"js\",\n    \"jsx\",\n    \"json\",\n    \"node\"\n  ],\n}\n```\n\nExplanation:\n\n- We always recommend having _all_ TypeScript files in a `src` folder in your project. We assume this is true and specify this using the `roots` option.\n- The `transform` config just tells Jest to use `ts-jest` for ts / tsx files.\n- The `testRegex` tells Jest to look for tests in any `__tests__` folder AND also any files anywhere that use the `(.test|.spec).(ts|tsx)` extension e.g. `checkbox.test.tsx` etc.\n- The `moduleFileExtensions` tells Jest to recognize our file extensions. This is needed as we add ts/tsx into the defaults (`js|jsx|json|node`).\n\n- **Step 3: Run tests**\n\nRun npx jest --watch (or `./node_modules/.bin/jest --watch`) from your project root and Jest will execute any tests you have.\n\n_Optional: Add script target for npm scripts_\n\nAdd this in `package.json`:\n\n```javascript\n{\n  \"test\": \"jest --watch\"\n}\n```\n\n- This allows you to run the tests in watch mode with a simple `yarn test` or `npm t`.\n\n- **Step 4: Setup Enzyme**\n\nEnzyme allows you to test React components with DOM support. There are three steps to setting up Enzyme:\n\n1. Install Enzyme, types for Enzyme, a better snapshot serializer for Enzyme, enzyme-adapter-react for your React version:\n\n```sh\nyarn add enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 --dev\n\n# or if you are using NPM\nnpm i enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D\n```\n\n2. Add \"snapshotSerializers\" and \"setupTestFrameworkScriptFile\" to your `jest.config.js`:\n\n```javascript\nmodule.exports = {\n  // ... ... ... TRUNCATED. Other parts as before ... ... ...\n\n  // Setup Enzyme\n  \"snapshotSerializers\": [\"enzyme-to-json/serializer\"],\n  \"setupTestFrameworkScriptFile\": \"\u003crootDir\u003e/src/setupEnzyme.ts\",\n}\n```\n\n3. Create `src/setupEnzyme.ts` file.\n\n```javascript\nimport { configure } from 'enzyme';\nimport EnzymeAdapter from 'enzyme-adapter-react-16';\n\nconfigure({ adapter: new EnzymeAdapter() });\n```\n\nThat's all to it!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedrickchee%2Freact-typescript-jest-enzyme-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedrickchee%2Freact-typescript-jest-enzyme-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedrickchee%2Freact-typescript-jest-enzyme-testing/lists"}