NestJS testing module — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 NestJS testing module: overrides &amp; scope</h1>
    <p class="pg-sub">
      A <b>model</b> of how <code>@nestjs/testing</code> resolves and overrides providers —
      not a real server. Try overriding a provider before and after <code>compile()</code>,
      then call <code>get()</code> and <code>resolve()</code> against providers of different scopes.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> overrideProvider() — before vs. after compile()</div>
      <div class="wirebox">
        <span class="node">OrdersService</span>
        <span class="arrow">injects →</span>
        <span class="node" id="cacheNode">CacheService (real)</span>
      </div>
      <div class="scoperow-label">
        Container state: <span class="compile-badge" id="compileBadge">building — not yet compiled</span>
      </div>
      <div class="callrow">
        <button class="btn sm" id="overrideBtn">overrideProvider(CacheService).useValue(fakeCache)</button>
        <button class="btn primary sm" id="compileBtn">compile()</button>
        <button class="btn ghost sm" id="overrideReset">Reset</button>
      </div>
      <div class="status" id="overrideStatus">
        <span class="dot good" id="overrideDot"></span>
        <span id="overrideText">Not compiled yet — overriding now will wire the mock in.</span>
      </div>
      <p class="hint">
        Click <b>compile()</b> first, then try the override — this reproduces the real
        error: <code>Cannot override a provider after the module has been compiled</code>.
        Click <b>Reset</b> to rebuild the module and try overriding <i>before</i> compiling instead.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> get() vs. resolve() by provider scope</div>
      <div class="field">
        <span class="ctl-label">Scope of <code>AuditLogService</code></span>
        <div class="seg" id="scopeSeg">
          <button type="button" aria-pressed="true" data-val="DEFAULT">DEFAULT</button>
          <button type="button" aria-pressed="false" data-val="REQUEST">REQUEST</button>
          <button type="button" aria-pressed="false" data-val="TRANSIENT">TRANSIENT</button>
        </div>
      </div>
      <div class="callrow">
        <button class="btn sm" id="getBtn">moduleRef.get(AuditLogService)</button>
        <button class="btn sm" id="resolveBtn">await moduleRef.resolve(AuditLogService)</button>
      </div>
      <label class="ctx-toggle">
        <input type="checkbox" id="ctxToggle" />
        Reuse the same context id on the next resolve() call
      </label>
      <div class="log" id="scopeLog" style="margin-top:12px">Pick a scope, then call get() or resolve().</div>
      <div class="callrow">
        <button class="btn ghost sm" id="scopeReset">Clear log</button>
      </div>
      <p class="hint">
        <b>DEFAULT</b> scope: <code>get()</code> succeeds (one static instance). <b>REQUEST</b>/<b>TRANSIENT</b>:
        <code>get()</code> throws — there is no single static instance to hand back — so the test has to
        <code>await resolve()</code> instead, which builds a fresh instance per call unless you reuse a context id.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.