kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
124 wiersze
3.6 KiB
TypeScript
124 wiersze
3.6 KiB
TypeScript
import { configureMockStore } from '@jedmao/redux-mock-store';
|
|
import { QueryClientProvider } from '@tanstack/react-query';
|
|
import { render, RenderOptions } from '@testing-library/react';
|
|
import { renderHook, RenderHookOptions } from '@testing-library/react-hooks';
|
|
import { merge } from 'immutable';
|
|
import React, { FC, ReactElement } from 'react';
|
|
import { Toaster } from 'react-hot-toast';
|
|
import { IntlProvider } from 'react-intl';
|
|
import { Provider } from 'react-redux';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import { Action, applyMiddleware, createStore } from 'redux';
|
|
import thunk from 'redux-thunk';
|
|
|
|
import { ChatProvider } from 'soapbox/contexts/chat-context';
|
|
import { StatProvider } from 'soapbox/contexts/stat-context';
|
|
import { queryClient } from 'soapbox/queries/client';
|
|
|
|
import { default as rootReducer } from '../reducers';
|
|
|
|
import type { AnyAction } from 'redux';
|
|
import type { AppDispatch } from 'soapbox/store';
|
|
|
|
// Mock Redux
|
|
// https://redux.js.org/recipes/writing-tests/
|
|
const rootState = rootReducer(undefined, {} as Action);
|
|
const mockStore = configureMockStore<typeof rootState, AnyAction, AppDispatch>([thunk]);
|
|
|
|
/** Apply actions to the state, one at a time. */
|
|
const applyActions = (state: any, actions: any, reducer: any) => {
|
|
return actions.reduce((state: any, action: any) => reducer(state, action), state);
|
|
};
|
|
|
|
const createTestStore = (initialState: any) => createStore(rootReducer, initialState, applyMiddleware(thunk));
|
|
const TestApp: FC<any> = ({ children, storeProps, routerProps = {} }) => {
|
|
let store: ReturnType<typeof createTestStore>;
|
|
let appState = rootState;
|
|
|
|
if (storeProps && typeof storeProps.getState !== 'undefined') { // storeProps is a store
|
|
store = storeProps;
|
|
} else if (storeProps) { // storeProps is state
|
|
appState = merge(rootState, storeProps);
|
|
store = createTestStore(appState);
|
|
} else {
|
|
store = createTestStore(appState);
|
|
}
|
|
|
|
const props = {
|
|
locale: 'en',
|
|
store,
|
|
};
|
|
|
|
return (
|
|
<div id='soapbox'>
|
|
<Provider store={props.store}>
|
|
<MemoryRouter {...routerProps}>
|
|
<StatProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ChatProvider>
|
|
<IntlProvider locale={props.locale}>
|
|
{children}
|
|
|
|
<Toaster />
|
|
</IntlProvider>
|
|
</ChatProvider>
|
|
</QueryClientProvider>
|
|
</StatProvider>
|
|
</MemoryRouter>
|
|
</Provider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const customRender = (
|
|
ui: ReactElement,
|
|
options?: Omit<RenderOptions, 'wrapper'>,
|
|
store?: any,
|
|
routerProps?: any,
|
|
) => render(ui, {
|
|
wrapper: () => <TestApp children={ui} storeProps={store} routerProps={routerProps} />,
|
|
...options,
|
|
});
|
|
|
|
/** Like renderHook, but with access to the Redux store. */
|
|
const customRenderHook = <T extends { children?: React.ReactNode }>(
|
|
callback: (props?: any) => any,
|
|
options?: Omit<RenderHookOptions<T>, 'wrapper'>,
|
|
store?: any,
|
|
) => {
|
|
return renderHook(callback, {
|
|
wrapper: ({ children }) => <TestApp children={children} storeProps={store} />,
|
|
...options,
|
|
});
|
|
};
|
|
|
|
const mockWindowProperty = (property: any, value: any) => {
|
|
const { [property]: originalProperty } = window;
|
|
delete window[property];
|
|
|
|
beforeAll(() => {
|
|
Object.defineProperty(window, property, {
|
|
configurable: true,
|
|
writable: true,
|
|
value,
|
|
});
|
|
});
|
|
|
|
afterAll(() => {
|
|
window[property] = originalProperty;
|
|
});
|
|
};
|
|
|
|
export * from '@testing-library/react';
|
|
export {
|
|
customRender as render,
|
|
customRenderHook as renderHook,
|
|
mockStore,
|
|
applyActions,
|
|
rootState,
|
|
rootReducer,
|
|
mockWindowProperty,
|
|
createTestStore,
|
|
queryClient,
|
|
};
|