DEV Community: Rolando Niubo

Bootstrap Theme React Context Provider. Light and Dark mode. Import and unimport CSS files dynamically with webpack.

Rolando Niubo — Fri, 05 Aug 2022 06:57:00 +0000

If you are here you most likely are trying to make a Theme Provider around a React application, probably to apply Light/Dark modes to your App, but Bootstrap is the CSS solution for the product in hand.

How to achieve this, you are going to need 2 css files, each file will provide each theme color, one will provide a dark mode, and the other will provide the light mode. Usually you will use the bootstrap css file and modify it, or purchase some themes on the internet, which will give you 2 css files, but actually this process can be done even by creating just 2 css files and putting your own styles inside. Then we are going to create a ThemeProvider doing a simple React context provider, and we will condition and toggle the imports of those to CSS files.

So to do this, first thing that comes to mind, is use React lazy and suspense, this way we can lazy import both files when we need it. The problem with this approach is that it will work only one time. First it would import the first CSS file, then when toggle the first time it will import the second file, but it wouldn't get rid of the first import, as React re-renders dont do that.

What we actually need is Toggle the imports, first import one of them, and then when we import the second one, we need to unimport the first one. To do this, we need to use a Webpack feature called lazyStyleTag. This feature allow us to import styles and lazy boundle them. So basically we can boundle them and unboundle them any time we want.

First let's add webpack lazyStyleTag

Go to your webpack config file and add the following rules

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        // Probly you already have this rule, add this line
        exclude: /\.lazy\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // And add this rule
      {
        test: /\.lazy\.css$/i,
        use: [
          { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
          "css-loader",
        ],
      },
    ],
  },
};

Now take your CSS files and change their name to the lazy named convention, as their documentation says you should.

You probably have this

light.css
dark.css 
// or
light.min.css
dark.min.css

Now will be this:

light.lazy.css
dark.lazy.css

Then create your React Theme Provider in a simple React context, this context will wrap your Application, so it will conditionaly boundle and unboundle each CSS file everytime the context state changes. This context state is going to be availabe anywhere inside your app as well as the setter via a custom hook we will export from the same file, check this out:

I'm using typescript, but you don't have to...

import React, {
    useEffect, createContext, useState, useContext,
} from 'react';
import { Nullable } from 'types';

// Now import both of your CSS files here like this:

// Import of CSS file number 1
import LightMode from './light.lazy.css';
// Import of CSS file number 2
import DarkMode from './dark.lazy.css';

// Typescript context interface, you don't need this if not // using TS
interface IContext {
    theme: Nullable<string>
    toggleTheme: () => void
}

const Context = createContext<IContext>({
    theme: null,
    toggleTheme: () => { },
});

// Your Provider component that returns 
// the Context.Provider
// Let's also play with the sessionStorage, 
// so this state doesn't
// brake with browser refresh or logouts
const ThemeProvider: React.FC = ({ children }) => {
    // Im initialazing here the state with any existing value in the 
    //sessionStorage, or not...
    const [theme, setTheme] = useState<Nullable<string>>(sessionStorage.getItem('themeMode') || 'dark');

    // this setter Fn we can pass down to anywhere
    const toggleTheme = () => {
        const newThemeValue = theme === 'dark' ? 'light' : 'dark';
        setTheme(newThemeValue);
        sessionStorage.setItem('themeMode', newThemeValue);
    };

    // Now the magic, this lazy css files you can use or unuse
    // This is exactly what you need, import the CSS but also unimport
    // the one you had imported before. An actual toggle of import in a 
    // dynamic way.. brought to you by webpack
    useEffect(() => {
        if (theme === 'light') {
            DarkMode.unuse();
            LightMode.use();
        } else if (theme == 'dark') {
            LightMode.unuse();
            DarkMode.use();
        }
    }, [theme]);


    return (
        <Context.Provider value={{ theme, toggleTheme }}>
            {children}
        </Context.Provider>
    );
};

export default ThemeProvider;
// This useTheme hook will give you the context anywhere to set the state of // theme and this will toggle the styles imported
export const useTheme = () => useContext(Context);

Remember to put this state on the sessionStorage like in this example so your user has the state available every time it comes back or refreshes the page

Wrap your App in the provider:

import ThemeProvider from './ThemeProvider'

const App = () => {
   return (
     <ThemeProvider>
        <App />
     <ThemeProvider/>
   )
}

Now just toggle the CSS imports of your application using your cool useTheme hook

import { useTheme } from './yourContextFile';


// inside your component
const AnyComponentDownTheTree = () => {

   const { theme, toggleTheme } = useTheme()

   // use the toggleTheme function to toggle 
   // and the theme actual value 
   // for your components, you might need 
   // disable something or set active a 
   // switch, etc, etc 

}

React Testing Library custom Render with options for Providers.

Rolando Niubo — Mon, 23 May 2022 17:19:29 +0000

There is multiple ways to setup a Custom Render that has already all your providers. Here you are going to see some sintax honey that will allows you to render your components using the React Testing Library, passing as options the providers you want to activate around that Component.

In this similar way:

renderUi(<Component />, {
    withReduxProvider: true,
    withReactQueryProvider: true,
})

In this example we use some Providers that you might not use on your application, also you might use some other I'm not using here. Just addapt your code following this same pattern. The same goes for versions, this code might change on the basis of how this Libraries change their implementation.

Let's continue.

First create our helper file in where we are going to make this possible:

Implementation

// this file simplifies the component setup process when rendering the component for testing

import React from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { Provider } from 'react-redux';
import { MemoryRouter as Router } from 'react-router-dom';
import { QueryClientProvider } from 'react-query';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import axios from 'axios';
import store from '/services/rootReducer';
import { createTestQueryClient } from '/services/test/utils';

interface IExtendedRenderOptions extends RenderOptions {
  withRouter?: boolean
  routerHistory?: string[]
  withRedux?: boolean
  mockInitialState?: any
  withQueryProvider?: boolean
  mockAxiosCalls?: any
}

// wrappers and contexts
const wrapInRedux = (componentTree: JSX.Element, { mockInitialState }: IExtendedRenderOptions) => {
    const storeConfig = configureStore([thunk]);
    const storeMock = mockInitialState ? storeConfig(mockInitialState) : store;
    // This allows you to use a passed mock store
    return (
        <Provider store={storeMock}>
            {componentTree}
        </Provider>
    );
};

const wrapInRouter = (componentTree: JSX.Element, routerHistory?: string[]) => (
    <Router initialEntries={routerHistory}>
        {componentTree}
    </Router>
);

const wrapInQueryProvider = (componentTree: JSX.Element) => {
    const testQueryClient = createTestQueryClient();
    return (
        <QueryClientProvider client={testQueryClient}>
            {componentTree}
        </QueryClientProvider>
    );
};


// You don't need this option if you are using something more advance such as Mock Service Worker
// This Function Mock axios calls and hand back a response for each call finding the right response by comparing the called endpoint with the endpoint fragment you passed
// You need to pass an array of objects, each object will represent a call
// { endpointFragment: string, expectedMockResponse: yourMockType }
type AxiosCallMock = { endpointFragment: string, expectedMockResponse: any }
// This one will runs on each axios get request
const mockAxiosCallResponsesIfAny = (renderOptions?: IExtendedRenderOptions) => {
    if (renderOptions?.mockAxiosCalls) {
        axios.get.mockImplementation((url) => {
            // If your component has multiple axios calls make sure to pass
            // endpoint fragments that identify them
            const optionObject = renderOptions?.mockAxiosCalls.find((mock: AxiosCallMock) => url.includes(mock.endpointFragment));
            return Promise.resolve(optionObject.expectedMockResponse);
        });
    }
};

const setupComponent = (ui: JSX.Element, renderOptions?: IExtendedRenderOptions) => {
    if (!renderOptions) return ui;
    let componentTree = <>{ui}</>;
    if (renderOptions.withRouter) componentTree = wrapInRouter(componentTree, renderOptions.routerHistory);
    if (renderOptions.withRedux) componentTree = wrapInRedux(componentTree, renderOptions);
    if (renderOptions.withQueryProvider) componentTree = wrapInQueryProvider(componentTree);
    return componentTree;
};

const customRender = (ui: JSX.Element, renderOptions?: IExtendedRenderOptions) => {
    try {
        mockAxiosCallResponsesIfAny(renderOptions);
        const componentTree = setupComponent(ui, renderOptions);
        return render(componentTree);
    } catch (error) {
        console.log(error);
        throw error;
    }
};

export * from '@testing-library/react';
export { customRender, IExtendedRenderOptions };

Usage

This is how we render the component in our Test

// Component.test.tsx
import React from 'react';
// we import out customRender
import { customRender, screen, fireEvent, waitFor } from 'ns_libs/testing/testUtils';
import Component from 'pages';

const initialProps: IProps = {
    toggle: () => {},
    isOpen: true,
    target: 'test-popover-target',
    feature: FEATURES_LIST.PORTFOLIO_GROUPS,
    subprojectId: 0,
};

// initialize redux state with any value you want
// maybe same values that is initialized in your app
const initialReduxState = {
           user: {
              name: "",
              age: 0,
           }
        }

const renderUi = (props: IProps = initialProps) => customRender(
    <Component {...props} />, {
        withRouter: true,
        routerHistory: [':some_path_maybe'],
        withRedux: true,
        mockInitialState: initialReduxState,
    },
);

This is an example of passing mock data on mock axios calls, if you still need to use that option to mock axios calls happening in your component:

import React from 'react';
import { customRender, screen, act, waitFor } from 'ns_libs/testing/testUtils';
import '@testing-library/jest-dom';
import axios from 'axios';

//  Sample Component
const SampleComponent = () => {
    const [data, setData] = React.useState<any>();
    const [dataTwo, setDataTwo] = React.useState<any>();

    const getTodos = async (): Promise<any> => {
        try {
            const res = await axios.get('https://yourendpoint.todos.com');
            setData(res);
        } catch (error) {
            console.log(error);
        }
    };

    const getOtherThings = async (): Promise<any> => {
        try {
            const res = await axios.get('https://endpoint.otherthings.com');
            setDataTwo(res);
        } catch (error) {
            console.log(error);
        }
    };

    React.useEffect(() => {
        getTodos();
        getOtherThings();
    }, []);

    return (
        <div>
            {data && <h1>{data?.map((item: any) => <span key={item.email}>{item.title}</span>)}</h1>}
            {dataTwo && <h1>{dataTwo?.map((item: any) => <span key={item.email}>{item.title}</span>)}</h1>}
        </div>
    );
};

export default SampleComponent;

// Here starts the test for Sample Component

const ResponseMock: any = [
    {
        endpointFragment: '/todos',
        expectedMockResponse: [
            {
                title: 'Nice First Title',
                description: 'The todo is this',
            },
                title: 'Nice Second Title',
                description: 'The todo is this',
            {
            },
        ],
    },
    {
        endpointFragment: '/otherthings',
        expectedMockResponse: [
            {
                title: 'First Other',
                content: 0,
            },
            {
                title: 'Second Other',
                content: 0,
            },
        ],
    },
];

const renderUi = () => customRender(<SampleComponent />, {
    mockAxiosCalls: ResponseMock,
});

describe('Test Component', () => {
    afterEach(() => {
        jest.resetAllMocks();
    });

    test('First test', async () => {
        renderUi();
        await waitFor(() => {
            const title = screen.getByText('Nice First Title');
            const title2 = screen.getByText('Nice Second Title');
            const title3 = screen.getByText('First Other');
            const title4 = screen.getByText('Second Other');
            expect(title).toBeInTheDocument();
            expect(title2).toBeInTheDocument();
            expect(title3).toBeInTheDocument();
            expect(title4).toBeInTheDocument();
        });
    });
});