mocked-provider-setup-no-more-mocked-responses.ts

import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { renderHook } from '@testing-library/react-hooks';
// import { DATA_9200000111963040 } from '../../../server/test/__mocks__/stubs/product-9200000111963040';
import { useGetProductQuery } from '../../lib/_generated-hooks';
// import { GET_PRODUCT } from './get-product.graphql';

import gql from 'graphql-tag';
import { FRAGMENT_PRODUCT } from '../../lib/fragments/product.fragment.graphql';

// IT IS NOT WORKING BECAUSE I USE A FRAGMENT, IF I PUT IN THE TOTAL QUERY THE TEST WORKS
const GET_PRODUCT = gql`
    query getProduct($id: String!) {
        getProduct(id: $id) {
            ...product
        }
    }
    ${FRAGMENT_PRODUCT}
`;


// in the data the images are still in old format not typed...
const mocks = [
    {
        request: {
            query: GET_PRODUCT,
            variables: {
                "id": "9200000111963040"
            },
        },
        result: {
            data: {
                getProduct: {
                    "id": "9200000111963040",
                    "title": "Ghost Recon Breakpoint Auroa Edition - PS4",
                    "rating": 0,
                    "shortDescription": "Pre-order nu en krijg toegang tot: ...",
                    "images": [
                        {
                            "key": "XS",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/mini/FC/0/4/0/3/9200000111963040.jpg"
                            
                        },
                        {
                            "key": "S",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/tout/FC/0/4/0/3/9200000111963040.jpg"
                            
                        },
                        {
                            "key": "M",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/thumb/FC/0/4/0/3/9200000111963040.jpg"
                            
                        },
                        {
                            "key": "L",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/regular/FC/0/4/0/3/9200000111963040.jpg"
                            
                        },
                        {
                            "key": "XL",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/large/FC/0/4/0/3/9200000111963040.jpg"
                            
                        },
                        {
                            "key": "XXL",
                            "url": "https://s.s-bol.com/imgbase0/imagebase3/extralarge/FC/0/4/0/3/9200000111963040.jpg"
                            
                        }
                    ],
                    "urls": [
                        {
                            "key": "DESKTOP",
                            "value": "https://www.bol.com/nl/p/ghost-recon-breakpoint-auroa-edition-ps4/9200000111963040"
                            
                        },
                        {
                            "key": "MOBILE",
                            "value": "https://www.bol.com/nl/p/ghost-recon-breakpoint-auroa-edition-ps4/9200000111963040"
                            
                        }
                    ]
                    
                }
            },
        },
    },
];

describe('Product', () => {
    // jest.useFakeTimers();
    // jest.runAllTicks();

    it('passes data correctly', async () => {

        const wrapper = ({children}) => (
            // our mocks have __typename's, but adding them by default (when stub has no typenames)
            <MockedProvider mocks={mocks} addTypename={true}>
                {children}
            </MockedProvider>
          );

        const { result, waitForNextUpdate } = renderHook(() => useGetProductQuery({
                variables: { "id": "9200000111963040" },
            }), {
            wrapper,
        });

        expect(result.current.loading).toBe(true);

        await waitForNextUpdate();

        expect(result.current.loading).toBe(false);
        expect(result.current.variables.id).toBe('9200000111963040');
        expect(result.current.data.getProduct).toEqual(
            expect.objectContaining({
                id: '9200000111963040'
            });
        );

    });
});

test is passing now, had fragment wrong when refactoring and not running the application but only the tests ;(