How to test setFieldValue from Formik, in a react-slider component - reactjs

Question

maybe it is a weird question, but I am new to unit testing, and can't wrap my head around this one.
import { Field, FieldInputProps, FieldMetaProps, FormikHelpers, FormikValues } from 'formik';
import Slider from 'components/elements/slider';
import FormError from 'components/elements/formerror';
import { useEffect, useState } from 'react';
interface IScheduleSlider {
min?: number;
max?: number;
title: string;
name: string;
unitLabel: string;
conversions: {
first: {
//eslint-disable-next-line
convertFct: (x: number) => number;
label: string;
};
second: {
//eslint-disable-next-line
convertFct: (x: number) => number;
label: string;
};
};
showError?: boolean;
}
const ScheduleSlider = ({ min = 0, max = 100, title, name, unitLabel, conversions, showError = false }: IScheduleSlider) => {
const [error, setError] = useState(false);
console.log(conversions);
useEffect(() => {
if (showError) {
setError(true);
}
}, [showError]);
const getRealValue = (val: number) => (val > max ? max : val);
return (
<Field name={name}>
{({
field,
form: { setFieldValue, setFieldTouched },
meta,
}: {
field: FieldInputProps<never>;
form: FormikHelpers<FormikValues>;
meta: FieldMetaProps<never>;
}) => (
<div className={`schedule-slider ${error ? 'error' : ''}`} data-testid="schedule-slider-test">
<div className="schedule-slider__top">
<h4>{title}</h4>
{typeof conversions?.first?.convertFct === 'function' && typeof conversions?.second?.convertFct === 'function' && (
<div>
<div className="schedule-slider__top--conversion">
<h5>{conversions?.first?.convertFct(field.value)}</h5>
<span>{conversions?.first?.label}</span>
</div>
<div className="schedule-slider__top--conversion">
<h5>{conversions?.second?.convertFct(field.value)}</h5>
<span>{conversions?.second?.label}</span>
</div>
</div>
)}
</div>
<div className="schedule-slider__bottom">
<Slider
max={Math.ceil(max)}
min={min}
value={Math.ceil(field.value)}
onChange={(val: number) => {
setFieldValue(field?.name, getRealValue(val));
setFieldTouched(field?.name, true);
setError(false);
}}
labels={{ left: `${min} ${unitLabel}`, right: `${max} ${unitLabel}` }}
/>
<div className="schedule-slider__value">
<div>
<h3 data-testid="field-test-value">{field.value}</h3>
<span>{unitLabel}</span>
</div>
</div>
</div>
{error && <FormError meta={meta} />}
</div>
)}
</Field>
);
};
export default ScheduleSlider;
This is my tsx file with the component, I have a ScheduleSlider component which in itself contains a formik component, and a react-slider, which has the onChange prop where setFieldValue and setFieldTouched is.
/* eslint-disable testing-library/no-container */
/* eslint-disable testing-library/no-node-access */
import ScheduleSlider from './scheduleslider';
import * as Formik from 'formik';
import { cleanup, fireEvent, render, screen, waitFor } from '#testing-library/react';
import React from 'react';
import userEvent from '#testing-library/user-event';
import { renderWithRedux } from 'test-utils';
describe('render ScheduleSlider', () => {
const mockFn = jest.fn();
const useFormikContextMock = jest.spyOn(Formik, 'useFormikContext');
beforeEach(() => {
useFormikContextMock.mockReturnValue({
setFieldValue: jest.fn(),
setFieldTouched: jest.fn(),
} as unknown as never);
});
afterEach(() => {
jest.clearAllMocks();
cleanup();
});
const defaultId = 'schedule-slider-test';
const sliderId = 'slider-test';
const fieldId = 'field-test-value';
it('render component with props', async () => {
const props = {
min: 0,
max: 100,
title: 'Test title',
name: 'POWER',
unitLabel: 'kWh',
conversions: {
first: {
convertFct: jest.fn().mockImplementation((x) => x),
label: '%',
},
second: {
convertFct: jest.fn().mockImplementation((x) => x),
label: 'km',
},
},
showError: false,
};
const { container } = renderWithRedux(
<Formik.Formik initialValues={{}} enableReinitialize onSubmit={mockFn}>
<ScheduleSlider {...props} />
</Formik.Formik>
);
// const slider = screen.queryByRole('slider');
const slider = screen.getByTestId(sliderId);
expect(container).toBeVisible();
props.conversions.first.convertFct.mockReturnValue('10');
props.conversions.second.convertFct.mockReturnValue('30');
// expect(slider).toBeVisible();
// expect(slider).toHaveClass('slider__thumb slider__thumb-0');
if (slider) {
slider.ariaValueMin = '1';
slider.ariaValueMax = '100';
// screen.getByTestId(fieldId).textContent = '80';
fireEvent.keyDown(slider, { key: 'ArrowLeft', code: 'ArrowLeft', charCode: 37 });
}
// expect(useFormikContextMock).toBeCalled();
// console.log(slider?.ariaValueMin);
// console.log(screen.getByTestId(fieldId).textContent);
console.log(props.conversions.second.convertFct.mock.results);
console.log(container.textContent);
});
it('render with default min, max, showError value', () => {
const props = {
min: undefined,
max: undefined,
title: 'test title',
name: 'schedule',
unitLabel: 'test unit',
conversions: {
first: {
convertFct: jest.fn(),
label: '%',
},
second: {
convertFct: jest.fn(),
label: 'km',
},
},
showError: true,
};
render(
<Formik.Formik initialValues={{}} enableReinitialize onSubmit={mockFn}>
<ScheduleSlider {...props} />
</Formik.Formik>
);
expect(screen.getByTestId(defaultId)).toBeVisible();
});
it('checks for onChange values', () => {
const props = {
min: 0,
max: 100,
title: 'test title',
name: 'schedule',
unitLabel: 'test unit',
conversions: {
first: {
convertFct: jest.fn(),
label: '%',
},
second: {
convertFct: jest.fn(),
label: 'km',
},
},
showError: undefined,
};
render(
<Formik.Formik initialValues={{}} enableReinitialize onSubmit={mockFn}>
<ScheduleSlider {...props} />
</Formik.Formik>
);
expect(screen.getByTestId(defaultId)).toBeVisible();
});
});
And this is my test file, I could render the component, and some of the branches, functions, statemnts are covered, but don't know how to test setFieldValue. Tried to fire events, but I am making some errors and can't see where. Anybody has any idea how to start with this. Sorry for the comments, console.log-s but I was tryng all kinds of solutions