All Projects → mikeheddes → react-testing-demo

mikeheddes / react-testing-demo

Licence: MIT license
How to test your React App with Jest

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to react-testing-demo

nextjs-graphql-auth
Authentication system using NextJS, GraphQL, Apollo Client, Apollo Server, MongoDB, Nginx, Docker, Docker-Compose and Kubernetes
Stars: ✭ 27 (+68.75%)
Mutual labels:  enzyme
react-app-boilerplate-2018
Bootstrap for a React App with Redux, React Router, Styled Components, Jest and Hot Reloading,
Stars: ✭ 20 (+25%)
Mutual labels:  enzyme
react-testing-mocha-chai-enzyme
A solid test setup for React components with Mocha, Chai, Sinon, Enzyme in a Webpack/Babel application.
Stars: ✭ 48 (+200%)
Mutual labels:  enzyme
enzyme-adapter-inferno
Inferno enzyme adapter
Stars: ✭ 16 (+0%)
Mutual labels:  enzyme
ReactionDecoder
Reaction Decoder Tool (RDT) - Atom Atom Mapping Tool
Stars: ✭ 59 (+268.75%)
Mutual labels:  enzyme
react-file-input
⚛️  A file Input, with drag'n'drop and image editor for React
Stars: ✭ 71 (+343.75%)
Mutual labels:  enzyme
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: ✭ 244 (+1425%)
Mutual labels:  enzyme
enzyme-adapter-react-17
Unofficial adapter for React 17 for Enzyme.
Stars: ✭ 289 (+1706.25%)
Mutual labels:  enzyme
WtfReactNativeTesting
Testing React Native Apps ✔️ ✅
Stars: ✭ 62 (+287.5%)
Mutual labels:  enzyme
RecordingSample
Recording Sample by React Native
Stars: ✭ 27 (+68.75%)
Mutual labels:  enzyme
my-react-todolist
A guide to TDD a React/Redux TodoList App
Stars: ✭ 22 (+37.5%)
Mutual labels:  enzyme
bechdel-test
Does your favorite film pass the test?
Stars: ✭ 25 (+56.25%)
Mutual labels:  enzyme
js-stack-from-scratch
🌺 Russian translation of "JavaScript Stack from Scratch" from the React-Theming developers https://github.com/sm-react/react-theming
Stars: ✭ 394 (+2362.5%)
Mutual labels:  enzyme
react-module-boilerplate
Sample React presentational components package.
Stars: ✭ 16 (+0%)
Mutual labels:  enzyme
react-typescript
React16 + HMR + typescript + webpack + tslint + tests
Stars: ✭ 21 (+31.25%)
Mutual labels:  enzyme
esri-redux
Simple boilerplate demonstrating how to setup a project using React, Redux, Flow, and the Esri JavaScript API.
Stars: ✭ 34 (+112.5%)
Mutual labels:  enzyme
react-native-unit-tests
Example how to test React Native components
Stars: ✭ 79 (+393.75%)
Mutual labels:  enzyme
coderplex
(Old) Frontend for coderplex.org
Stars: ✭ 40 (+150%)
Mutual labels:  enzyme
eslint-config-with-prettier
Eslint config with prettier
Stars: ✭ 39 (+143.75%)
Mutual labels:  enzyme
astraea
TypeScript + React Boilerplate
Stars: ✭ 15 (-6.25%)
Mutual labels:  enzyme

Testing your React App with Jest 🃏

The following scenarios will be covered:

Basic

  1. Test an interaction with a DOM element that updates state. [Counter]
  2. Test a component wrapped in a HOC (e.g. Redux' mapState). [ScreenWidth, PageURL]
  3. Create snapshots for the above. [All component tests]

Advanced

  1. Test a component that is wrapped in the React context. [PageURL]
  2. Test a React ref attached to a DOM node. [Reminder]
  3. Test code that uses browser global variables. [ScreenWidth]

Project structure

The components and tests are in ./src/components. The tests for Component.jsx are in Component.test.jsx.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Runs the tests in watch mode.

npm run test:watch

Runs the tests in watch mode and shows the test coverage.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].