Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/davidkpiano/xstate-test-demo

Demo React project for model-based testing with @xstate/test
https://github.com/davidkpiano/xstate-test-demo

Last synced: 10 days ago
JSON representation

Demo React project for model-based testing with @xstate/test

Host: GitHub
URL: https://github.com/davidkpiano/xstate-test-demo
Owner: davidkpiano
Created: 2019-08-27T20:32:09.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-01-04T08:22:31.000Z (almost 2 years ago)
Last Synced: 2024-10-22T11:22:17.720Z (20 days ago)
Language: JavaScript
Size: 4.53 MB
Stars: 112
Watchers: 8
Forks: 33
Open Issues: 26
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-list - xstate-test-demo - based testing with @xstate/test | davidkpiano | 100 | (JavaScript)

README

        # Model-Based Testing with `@xstate/test` and React Demo

This is a React project bootstrapped with [Create React App](https://github.com/facebook/create-react-app). It demonstrates how to use `@xstate/test` with React to automate the generation of integration and end-to-end (E2E) tests of an example application.

![End-to-end tests for Feedback app being run in a browser with Puppeteer](https://i.imgur.com/W5CaIIP.gif)

## Running the Tests

To run the **integration tests**, run `npm test`. This will run the tests found in [`./src/App.test.js`](https://github.com/davidkpiano/xstate-test-demo/blob/master/src/App.test.js).

To run the **E2E tests**, run `npm run e2e`. This will run the tests found in [`./src/App.e2e.js`](https://github.com/davidkpiano/xstate-test-demo/blob/master/src/App.e2e.js).

NOTE: To run the **E2E tests** on a different port: `PORT=3001 npm run e2e`

## Resources

- [Github: `@xstate/test`](https://github.com/davidkpiano/xstate/tree/master/packages/xstate-test)

- [Slides: Write Less Tests! From Automation to Autogeneration](https://slides.com/davidkhourshid/mbt/) (React Rally 2019)

- [Article: Model-Based Testing in React with State Machines](https://css-tricks.com/?p=286484) (CSS-Tricks)