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();
});
});