React functional component render returns nothing in unit test

Viewed 90

I am struggling with this React functional component when writing a unit test, when I run the test nothing is returned from render().

I have tried to remove the functionality from the component to return a plain p tag, however this has made no difference. Completely stuck as to why this won't work.

Here is the component and unit test if anyone is able to assist.

Component:

import React, { useState, Fragment, useEffect, MouseEventHandler } from 'react';
import { AdvancedSearchModal } from './AdvancedSearchModal'; 
import { useTeamPreferences } from 'common/useTeamPreferences';
import { advancedSearchService } from 'services/advanced-search.service';
import { AdvancedSearchQuery, DocumentType } from 'models/AdvancedSearch';
import './AdvancedSearch.scss';

type CreateFilterProps = {
    onAggregateQueryChange: Function
}

export const CreateFilterButton = ({onAggregateQueryChange}: CreateFilterProps) => {
    const [isShowDialog, setShowDialog] = useState<boolean>(false);
    const [availableDocumentTypes, setAvailableDocumentTypes] = useState<DocumentType[]>([]);
    const teamPreferences: any = useTeamPreferences();

    useEffect(() => {
        if (!teamPreferences.show_advanced_search_button) return;

        advancedSearchService.listDocumentTypes()
            .then((documentTypes) => setAvailableDocumentTypes(documentTypes));
    }, [teamPreferences]);

    const handleClick = (e: any): void => {
        setShowDialog(!isShowDialog);
        e.preventDefault();
    };

    const closeDialog = (): void => {
        setShowDialog(false);
    }

    const handleAggregateQuery = (aggregateQuery: AdvancedSearchQuery[]): void => {
        onAggregateQueryChange(aggregateQuery);
        closeDialog();
    }

    if (!teamPreferences.show_advanced_search_button) {
        return null;
    }

    return (
        <Fragment>
            <a className="btn btn-xs btn-primary btn_patient-filter--new" onClick={handleClick}>New Filter</a>
            {isShowDialog && <AdvancedSearchModal
                onClose={closeDialog}
                handleAggregateQuery={handleAggregateQuery}
                availableDocumentTypes={availableDocumentTypes}
            />}
        </Fragment>
    );
};

Unit test:

import React from 'react';
import { useTeamPreferences } from 'common/useTeamPreferences';
import { act } from "react-dom/test-utils";
import { render, unmountComponentAtNode } from "react-dom";
import { CreateFilterButton } from 'features/patients/advanced-search/CreateFilterButton';

jest.mock('common/useTeamPreferences.js', () => {
    const original = jest. requireActual('common/useTeamPreferences')
    return {
        __esModule: true,
        default: jest.fn(original.default)
    }
});

describe('CreateFilterButton', () =>{
    let container: any;
    let teamPreferencesMock: any;

    const handleAdvancedSearchResults = () => {
        return [];
    }

    beforeEach(() => {
        container = document.createElement('div');
        document.body.appendChild(container);

        act(() => {
            render(<CreateFilterButton
                onAggregateQueryChange={handleAdvancedSearchResults}/>, container);
        });
    });

    afterEach(() => {
        unmountComponentAtNode(container);
        container.remove();
        container = null;
    });

    it('should render', () => {
        expect(container).toBeTruthy();
    });

});
0 Answers
Related