# jest-mock-react-noop

> Mock React components to noops with Jest.

Latest version **2.0.1** (published 2020-01-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install jest-mock-react-noop
pnpm add jest-mock-react-noop
yarn add jest-mock-react-noop
bun add jest-mock-react-noop
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-01-23 |
| First published | 2020-01-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | andersdjohnson |
| Keywords | react, react-testing-library, @testing-library/react, testing-library, mock, jest, noop, component, mount, shallow, enzyme |

## Links

- npm: https://www.npmjs.com/package/jest-mock-react-noop
- Repository: https://github.com/AndersDJohnson/jest-mock-react-noop
- Homepage: https://github.com/AndersDJohnson/jest-mock-react-noop#readme
- Issues: https://github.com/AndersDJohnson/jest-mock-react-noop/issues
- npm.io page: https://npm.io/package/jest-mock-react-noop

## Dependencies (1)

- [react-display-name](https://npm.io/package/react-display-name.md) ^0.2.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2020-01-23
- 1.1.1 — 2020-01-22
- 1.1.0 — 2020-01-04
- 1.0.0 — 2020-01-03

## README

# jest-mock-react-noop

> Mock React components to noops with Jest.

⚛️:construction::goat:

Remember shallow rendering from [`enzyme`](https://airbnb.io/enzyme/)?
Wish you could have it with [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro)?
Now you can!

Use [`jest.mock`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options)
to re-define `react` as `jest-mock-react-noop`, providing it with an argument indicating the component(s) under test.
`jest-mock-react-noop` returns a monkeypatched version of React with a modified `createElement` function.
When rendering, any component not under test will be replaced with one that returns a placeholder empty `div`
with a `data-jest-mock-react-noop` attribute whose value is that component's name.

You can query for placeholder `div`s using the following query functions
(similar to [`@testing-library`'s query functions](https://testing-library.com/docs/dom-testing-library/api-queries)):
* `getByNoop`
* `getAllByNoop`
* `queryByNoop`
* `queryAllByNoop`

```tsx
import "@testing-library/jest-dom";
import * as React from "react";
import { renderWithNoop } from "jest-mock-react-noop";
import { App } from "../App";

jest.mock("react", () =>
  // @ts-ignore
  require("jest-mock-react-noop").default('App')
);

describe("App", () => {
  test("works", () => {
    const { queryByNoop } = renderWithNoop(<App />);

    // Assert that a nested component is rendered only as a noop.
    expect(queryByNoop('Other')).toBeInTheDocument();
  });
});
```

You can match components by name with string:

```ts
require("jest-mock-react-noop").default('App')
```

Or with regular expression:

```ts
require("jest-mock-react-noop").default(/App/)
```

Or with a function returning a `boolean` (which also gives you access to the component constructor):

```ts
require("jest-mock-react-noop").default(
  // `name` is the component name/string
  // `type` is the function/constructor or tag name string
  (name, type) => return ['App', 'MyComponent'].includes(name)
)
```

If you prefer to configure `queries` manually and use the native `render` instead of our `renderWithNoop`,
you can import either `noopQueries` (with type `NoopQueries`) or `noopQueriesWithDefaults` (with type and `NoopQueriesWithDefaults`, which includes the defaults from `@testing-library/react`).

```tsx
import { render, queries } from "@testing-library/react";
import { noopQueries, NoopQueriesWithDefaults} from "..";

describe("App", () => {
  test("works", () => {
    const { queryByNoop, queryByTestId } = render<NoopQueriesWithDefaults>(<App />, {
      queries: {
        ...queries,
        ...noopQueries
      }
    });
  });
});
```

```tsx
import { render } from "@testing-library/react";
import { noopQueriesWithDefaults, NoopQueriesWithDefaults} from "..";

describe("App", () => {
  test("works", () => {
    const { queryByNoop, queryByTestId } = render<NoopQueriesWithDefaults>(<App />, {
      queries: noopQueriesWithDefaults
    });
  });
});
```

Sometimes `jest.mock` as above won't work, e.g., with `ts-jest` you might get this error:

```
TypeError: require(...).default is not a function
```

If so, you can try this:

```ts
jest.mock("react", () => ({
  ...jest.requireActual('react'),
  createElement: jest.fn()
}));

React.createElement.mockImplementation(
  // @ts-ignore
  require('jest-mock-react-noop').default('App').createElement
);
```

---
_Source: https://npm.io/package/jest-mock-react-noop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._