React-jsx-mock NPM

React JSX Mock

Mock components at the JSX level

Easily mock compoents by passing the real component
Custom jest matches
Types are infered from the real implementation

Setup (with vite / vitest)
Setup (with babel)
API
Inspiration

Setup (with vite / vitest)

Add jsxImportSource option to react vite plugin

// vite.config.ts

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: process.env.VITEST ? 'react-jsx-mock' : 'react',
    }),
  ],
  test: {
    setupFiles: 'src/testSetup.ts',
    environment: 'happy-dom',
    globals: true,
  },
});

Add matchers

// src/setupTests.ts

// Add custom jest matchers
import 'react-jsx-mock/jest-expect';

Setup (with babel)

See examples/with-babel for an example

// src/setupTests.ts

// Patch JSX functions
import 'react-jsx-mock/monkey-patch';

// Add custom jest matchers
import 'react-jsx-mock/jest-expect';

API

// src/components/Header.test.tsx

import { mockComponent } from 'react-jsx-mock';

// mock a component, use the default mock implementation "(props) => null"
const MockMenu = mockComponent(Menu);

// mock a component, providing a mock implementation
const MockMenu = mockComponent(Menu, (props) => (
  <div id={props.id} data-testid="mocked-menu" />
));

// assert the mock is rendered with a complete set of expected props
expect(MockMenu).toBeRenderedWithProps(expectedProps);

// assert the mock is rendered with a partial set of props
expect(MockMenu).toBeRenderedWithPropsMatching({ items: expectedItems });

// access currently rendered props (throws if not rendered once)
expect(MockMenu.mock.get().props.href).toBe('https://reactjs.org');

// access all currently rendered props directly
expect(MockMenu.mock.all().map(({ props }) => props.id)).toEqual([
  'a',
  'b',
  'c',
]);