A custom jest matcher for checking whether props have been passed to a mocked React component

jest-props-matcher.ts

expect.extend({
  toReceivePropsContaining(received, expected) {
    if (!received._isMockFunction) {
      return {
        message: () =>
          `Expected: ${chalk.green(
            '[A mocked React component]'
          )}\nReceived: ${this.utils.printReceived(received)}`,
        pass: false,
      }
    }
    // we check the props given at the latest invocation of the mocked component
    const [props] = received.mock.calls.at(-1)
    const pass = this.equals(props, expect.objectContaining({ ...expected }))

    if (pass) {
      return {
        message: () =>
          `Expected: ${this.utils.printExpected(
            expected
          )}\nReceived: ${this.utils.printReceived(received)}`,
        pass: true,
      }
    }
    return {
      message: () =>
        `Expected props to contain: ${this.utils.printExpected(
          expected
        )}\nReceived props: ${this.utils.printReceived(props)}`,
      pass: false,
    }
  },
})



/*
==========
Example Usage
==========

// Component.ts

const Component: React.FC = () => (<SubComponent isCool={true} />)

// Component.spec.ts

import { Component } from './component'
import { SubComponent } from './component/sub-component'

jest.mock('./component/sub-component')

it('is a test', () => {
    render(<Component />) 
    expect(SubComponent).toReceivePropsContaining({ isCool: true })
})
*/