GeospatialMax / xstate-test-with-test-specific-mocks

Created with CodeSandbox

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