React-DI

Description

Package implements DI pattern for React. Especially to mock components for e2e(cypress) tests.

Usage

Provide dependencies

import { DIProvider } from '@mate-academy/react-di';
import { Header, HeaderMock } from './Header';

const providers = {
  production: [Header],
  test: [{ value: HeaderMock, token: Header }],
};

const App = () => {
  return (
    <DIProvider providers={providers[process.env.NODE_ENV]}>
      <div />
    </DIProvider>
  );
};

Use dependencies

There are no if-else, or imported mocks inside a code. Only in providers config.

import { useDI } from '@mate-academy/react-di';
import { Header } from './Header';

const Page = () => {
  const Header = useDI(Header);

  return (
    <Header>
      Page
    </Header>
  );
};