Ao realizar o seguinte teste:
import { render } from '@testing-library/react';
import { NavigateMonths } from './navigateMonths';
describe('Header', () => {
it('should render navigateMonths', async () => {
const navigateMonths = render(<NavigateMonths />);
expect(navigateMonths.getByTestId('navigateMonths')).toBeTruthy();
});
});
Estou obtendo erro:
TypeError: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object
export const INITIAL_APP_STATE: AppState = {
19 | ...INITIAL_LEGACY_STATE,
> 20 | common: INITIAL_COMMON_STATE,
| ^
21 | configPermissions: INITIAL_STATE_PERMISSION_CONFIG,
22 | offers: INITIAL_OFFER_STATE,
23 | onBoardingFinancialHealth: INITIAL_ONBOARDING_FINANCIAL_HEALTH_STATE,
o componente renderizado é o seguinte:
import moment from 'moment';
import { useStateContext } from '../../../../../common/hooks/context/stateContext';
import { Icon, Icons, Typography } from '../../../../../design';
import { globalCentralizedControl, homeCalendar, periodModel } from '../../../centralizedControl';
import { BankList } from '../../bankAccounts/list/bankList';
import { TotalBalance } from '../../bankAccounts/balance/totalBalance';
export const NavigateMonths: React.FC = () => {
const { isMobile } = globalCentralizedControl;
useStateContext(periodModel);
const handlePreviousMonth = () => {
homeCalendar.addPreviousWorkerDate();
const [currentDate] = homeCalendar.workerCurrentDate;
periodModel.currentPeriodScroll = currentDate;
};
const handleNextMonth = () => {
homeCalendar.addNextWorkerDate();
const [currentDate] = homeCalendar.workerCurrentDate;
periodModel.currentPeriodScroll = currentDate;
};
const date = moment(periodModel.currentPeriodScroll).format('MMMM YYYY');
const isVisible = periodModel.viewNavigateMonths || !isMobile;
return (
isVisible && (
<div data-testid="navigateMonths" className="z-10 flex h-100 w-100 justify-between bg-neutral-high px-base pb-micro">
{!isMobile && <BankList />}
<div className="flex w-100 items-center justify-between md:w-[350px] md:gap-huge">
<button type="button" onClick={handlePreviousMonth} className="rotate-180">
<Icon type={Icons.ARROW_RIGHT} className="fill-neutral-low-300" size="xs" />
</button>
<Typography type="p" className="text-brand-primary-800" text={date} />
<button type="button" onClick={handleNextMonth}>
<Icon type={Icons.ARROW_RIGHT} className="fill-neutral-low-300" size="xs" />
</button>
</div>
{!isMobile && <TotalBalance />}
</div>
)
);
};
o arquivo main.tsx:
import './design/theme/index.css';
import './index.css';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { RoutesConfig } from './routes/config';
import { configStore } from './common/state/reducer';
import { INITIAL_STATE_PERMISSION_CONFIG } from './routes/state/state';
import { INITIAL_OFFER_STATE } from './app/lowToutch/reducer/offers/reducer';
import { INITIAL_ONBOARDING_FINANCIAL_HEALTH_STATE } from './app/onBoardingFinancialHealth/reducer/onBordingFinancialHealth/reducer';
import { INITIAL_UNDERSTANDING_BUSINESS_STATE } from './app/understandingBusiness/reducer/understandingBusiness/reducer';
import { AppState } from './common/state/state.types';
import { INITIAL_LEGACY_STATE } from './app/legacy/INITIAL_LEGACY_STATE';
import { Portals } from './common/portals/portals';
import { GlobalStyle } from './app/legacy/global/style';
import { INITIAL_COMMON_STATE } from './common/reducer/initialStateCommon';
import { INITIAL_STATE_BANK_INTEGRATION } from './app/bankIntegration/reducer/initialStateBankIntegration';
export const INITIAL_APP_STATE: AppState = {
...INITIAL_LEGACY_STATE,
common: INITIAL_COMMON_STATE,
configPermissions: INITIAL_STATE_PERMISSION_CONFIG,
offers: INITIAL_OFFER_STATE,
onBoardingFinancialHealth: INITIAL_ONBOARDING_FINANCIAL_HEALTH_STATE,
understandingBusiness: INITIAL_UNDERSTANDING_BUSINESS_STATE,
bankIntegration: INITIAL_STATE_BANK_INTEGRATION,
};
export const store = configStore(INITIAL_APP_STATE);
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<Provider store={store}>
<RoutesConfig />
<Portals />
<GlobalStyle />
</Provider>
);
babel.rc:
{
"env": {
"test": {
"plugins": ["transform-object-rest-spread"]
}
}
}
babel.config.js:
module.exports = {
plugins: ['transform-object-rest-spread'],
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'@babel/preset-react',
],
};
