Caching doesn't seem to work in specs

Describe the bug

I am effectively trying to call cache.writeQuery and cache.readQuery as part of an Angular Spec file. The item is always written to the cache (I have log messages that at least indicate so), but for whatever reason reading it back doesn't work at all.

To Reproduce

The following code is ripped out of my application as condensed version and is also available as a Jasmine-Test on StackBlitz that immediatly shows the error and the log output.

// The query to execute
export const NameBlockLanguageDocument = gql`
  query FullBlockLanguage($id: ID!) {
    blockLanguage(id: $id) {
      id
      name
      grammarId
      sidebars
      editorBlocks
    }
  }
`;

// Some data that should end up in the cache
const DEFAULT_EMPTY_BLOCKLANGUAGE = Object.freeze({
  __typename: "BlockLanguage",
  id: "96659508-e006-4290-926e-0734e7dd061a",
  name: "Empty Spec Block Language",
  grammarId: "2ca79350-c734-4f61-a44b-cca25cf3a122",
  sidebars: [],
  editorBlocks: [],
});

// Utility function to write something into the cache and log it.
export function cacheFullBlockLanguage(apollo: Apollo, blockLangDesc: any) {
  // Make the block language available to the rendered trees
  const queryData: any = {
    blockLanguage: Object.assign(
      { __typename: "BlockLanguage" },
      blockLangDesc
    ),
  };
  // Don't need to provide explicitly linked ID as it is contained
  // in the given ID and the __typename
  apollo.client.cache.writeQuery({
    query: NameBlockLanguageDocument,
    data: queryData,
    variables: { id: blockLangDesc.id },
  });

  console.log("Explicitly added to GraphQL Cache:", blockLangDesc);
}

// The actual test
describe("GQL Cache", () => {
  async function createModule() {
    await TestBed.configureTestingModule({
      imports: [ApolloTestingModule],
      providers: [],
    }).compileComponents();

    const apollo = TestBed.inject(Apollo);

    return { apollo };
  }

  it(`Stores and reads a block language`, async () => {
    const t = await createModule();

    const b = DEFAULT_EMPTY_BLOCKLANGUAGE;

    cacheFullBlockLanguage(t.apollo, b);

    const cache = t.apollo.client.cache;
    const res = cache.readQuery({
      query: NameBlockLanguageDocument,
      variables: {
        id: b.id,
      },
    });

    console.log("Cache state", (cache as any).data.data);

    expect(res["name"]).toEqual(b.name);
  });
});

The first log entry strongly indicates that the item is indeed added to the cache and well formed:

Explicitly added to GraphQL Cache: 
Object { __typename: "BlockLanguage", id: "96659508-e006-4290-926e-0734e7dd061a", name: "Empty Spec Block Language", sidebars: [], editorBlocks: [], grammarId: "2ca79350-c734-4f61-a44b-cca25cf3a122" }

And if I dig into the private state of the cache, I can find the entry there as well:

Cache state {…}
"BlockLanguage:96659508-e006-4290-926e-0734e7dd061a": Object { id: "96659508-e006-4290-926e-0734e7dd061a", __typename: "BlockLanguage", name: "Empty Spec Block Language", … }
ROOT_QUERY: Object { __typename: "Query", "blockLanguage({\"id\":\"96659508-e006-4290-926e-0734e7dd061a\"})": {…} }

Nevertheless the spec (and therefore the cache read) fails with res being undefined instead of properly mirroring DEFAULT_EMPTY_BLOCKLANGUAGE.

Expected behavior

I would expect that the item is retrieved from the cache and therefore the test passes.

Environment:

• @apollo/client: 3.3.11
• apollo-angular: 2.4.0
• graphql: 15.5.0
• @angular/core: 11.2.5
• @angular/cli: 11.2.4
• typescript: 4.1.3

Additional context

I also asked this over on StackOverflow but I didn't get a response yet. The more I am digging around this the more I am suspecting I might be hitting a bug.

Run the Jasmine test in the linked StackBlitz, starting with src/app/gql-cache.ts and the createModule setup using ApolloTestingModule. Compare the writeQuery and readQuery calls, including their query and variables; done means the test reliably reads the written object or the incompatibility is clearly documented.