mockGraphQLQuery not being called

Get Help and Help Others
1

I wrote a test a while back and had some trouble with it but was able to get it working with help from the community:

It’s been working ever since, but now, after an upgrade, it’s failing. The cause is that mockGraphQLQuery is not being called for some reason. The code I’m testing is:

import { useQuery } from '@redwoodjs/web';

const GET_TENANT = gql`
  query getTenant($domain: String!) {
    tenantByDomain(domain: $domain) {
      id
      domain
    }
  }
`;

const useTenant = () => {
  // this should be an admin domain so it should end with `-admin`.
  // e.g. foo-admin.example.com
  // 1. strip the subdomain off, should be left with `foo-admin`
  const adminSubdomain = window.location.host.split('.')[0];
  // 2. strip the `-admin` off
  const subdomain = adminSubdomain.substring(
    0,
    adminSubdomain.indexOf('-admin')
  );

  return useQuery(GET_TENANT, {
    variables: { domain: subdomain },
  });
};

export default useTenant;

And the test is:

import { renderHook, waitFor } from '@redwoodjs/testing/web';

jest.mock('../auth');

import useTenant from './use-tenant';

describe('useTenant', () => {
  it('gets tenantId', async () => {
    const expectedTenantId = 1001;
    const domain = 'test-tenant-id';
    const host = `${domain}-admin.example.com`;
    const href = `http://${host}`;

    window = Object.create(window);
    Object.defineProperty(window, 'location', {
      value: { href, host },
      writable: true,
    });

    mockGraphQLQuery('getTenant', (variables) => {
      console.log('getTenant', variables);
      return { tenantByDomain: { id: variables.id, domain } };
    });

    const { result } = renderHook(() => useTenant());

    await waitFor(() => {
      console.log('result', result.current.error.message);
      return expect(result?.current?.data?.tenantId).toEqual(expectedTenantId);
    });
  });
});

The error message from the useTenant call is:

Invalid URL: /

This is on v7.4.2. I have a copy of the code on v5.0.2 and it works fine there. Were there any changes to mockGraphQLQuery that might be causing this? Any idea why it might be failing to be called now?

2

Hi @LarkSoftware - not a direct solution to your question here, but I can confirm that mockGraphqlQuery is working as expected in my reproduction.

Here’s what I did.

// HomePage.tsx
import { useQuery } from '@redwoodjs/web'

const HomePage = () => {
  const { data, loading } = useQuery(gql`
    query Bazinga {
      redwood {
        version
      }
    }
  `)

  return (
    <>
      <h1>HomePage</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <pre data-testid="bazinga-element">{JSON.stringify(data?.redwood)}</pre>
      )}
    </>
  )
}

export default HomePage

And for the test

// HomePage.test.tsx
  mockGraphQLQuery('Bazinga', { redwood: { version: 'BOOOOOM' } })

  it('has mocked version number', async () => {
    const { getByTestId } = render(<HomePage />)
    await waitFor(() =>
      expect(getByTestId('bazinga-element').innerHTML).toBe(
        '{"version":"BOOOOOM"}'
      )
    )
  })

While there have been version upgrades and such (quite a big leap from v5 to v7!) - I don’t see the usual suspects that may be causing this.

My suggestion here:

  1. Double check the upgrade guides to make sure you followed all the steps. This is a silly suggestion, but quite often where things go wrong!
  2. If this doesn’t work, could you help us with a minimal reproduction? The process of doing this might actually reveal the issue, and if not give us something for us to work with :slight_smile:
3

If this doesn’t work, could you help us with a minimal reproduction? The process of doing this might actually reveal the issue, and if not give us something for us to work with :slight_smile:

As I began putting together a minimal test-case I found the problem. While trying to track down the problem I think at one point I thought maybe this line was the problem:

  const adminSubdomain = window.location.host.split('.')[0];

So I added this code to my test:

window = Object.create(window);
    Object.defineProperty(window, 'location', {
      value: { href, host },
      writable: true,
    });

This code is right before mockGraphQLQuery so it gave me the illusion that it wasn’t working, but it wasn’t a problem with mockGraphQLQuery, the test quit before it got that far. My test is working again. Thank you for your help. Here is my working test:

import { renderHook, waitFor } from '@redwoodjs/testing/web';

jest.mock('../auth');

import useTenant from './use-tenant';

describe('useTenant', () => {
  it('gets tenantId', async () => {
    const expectedTenantId = 1001;
    const subDomain = 'test-tenant';
    const host = `${subDomain}-admin.example.com`;
    const expectedDomain = `http://${host}`;

    mockGraphQLQuery('getTenant', (variables) => {
      return {
        tenantByDomain: { id: expectedTenantId, domain: expectedDomain },
      };
    });

    const { result } = renderHook(() => useTenant());

    await waitFor(() => {
      expect(result?.current?.data?.tenantByDomain.id).toEqual(
        expectedTenantId
      );
      return expect(result?.current?.data?.tenantByDomain.domain).toEqual(
        expectedDomain
      );
    });
  });
});
1 Like
4

Awesome, glad to hear its all working!