Every screen I designed in Lovable this month moved to real data unchanged, and that is exactly why one of them couldn't. Our fixtures are recorded from the real gateway with a capture setting on, never hand-written, so they match the live response shape byte for byte. I treated that fidelity as the safety feature. I had it backwards: it belongs to a failure class where a high-fidelity mock gives you frictionless handoff for every field the backend already returns, and zero signal for a design that quietly depends on a field it doesn't. MSW or Mirage mocks under a React app, OpenAPI stub servers, canned JSON fed to an LLM agent tool: same bug, different stacks.
Recording fixtures from the gateway made one field a lie
The redesign needed data our gateway (the Node service in MCP-servers/Vodou-Console) does not return. Nothing in the demo said so. The panel looked done because the only way to make it look done was to hand-edit the fixture, and a hand-edited fixture is a backend work item wearing a demo's clothes. The tell came at integration: our preview worktree proxies API calls to live app.vodou.ai, the real response arrived without the field, and the finished design turned out to require a gateway schema change before it could work for anyone. The classic search is "works with mock data, breaks with the real API", except nothing broke loudly. The contract in MCP-servers/Vodou-Console/src/api/gateway-openapi.json was right the whole time. The fixture stopped being a recording the moment I touched it.
Speedscale's drift warning covers renames, not wishes
Speedscale's Your Mock Is Lying nails one direction: the backend renames status to shipmentStatus, the mock keeps serving the old shape, the suite stays green, production goes quiet. Its fix is contract-accurate mocks. Mine were contract-accurate, recorded from the live system, and the gap ran the other way: the frontend grew a dependency the contract never had. Any key your UI reads that exists in a fixture but not in the provider's live response is an unscheduled backend change, and your suite will stay green about it. A faithful recording cannot check that for you, because faithfulness is the thing being violated.
comm -23 your fixture keys against one live response
Five minutes, any stack:
jq -r 'paths(scalars) | join(".")' mocks/profile.json | sort -u > fixture.keys
curl -s "$API/profile/123" -H "Authorization: Bearer $TOK" \
| jq -r 'paths(scalars) | join(".")' | sort -u > live.keys
comm -23 fixture.keys live.keys
Empty output passes: everything your mock serves, your backend serves. Every line of output is a key someone added to make a design demo, which means a schema change nobody scheduled.
The rule: treat any hand edit to a recorded fixture as an API change request, and file it the moment you make it. The mock will never raise it, and its silence is the feature working.
Source: High-fidelity mocks hide the fields your backend never returns by Chad Priest, from Building Vodou in Public.
Top comments (0)