XState model based tests with test-specific mock implementations for query functions
NOTE: Because of supposedly limitations of Codesandbox with Jest/React Testing Library the tests currently don't run in Codesandbox
This repository demonstrates how test-specific mocks can be implemented based on the events generated by a model-based test, generated with @xstate/test.
In this specific setup we have an application that:
- is based around xstate state machines (see AppMachine.js for the state machine)
- has an initial state name
initialising
- moves from that state to
ready
as soon as the first data is received - loads data using react-query (see App.js)
The approach for testing the application is: (see app.test.js for implementation)
- define a test machine
- define test events where the
DATA_RECEIVED
event receives multiple cases (i.e. multiple data returns) - change the mock implementation of the query function (used by react-query) on every test path, based on the event extracted from the segment of the test model
- check in the tests if the returned data is displayed in the application as expected