TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published


    A jest matcher for shallow rendered React component snapshots


    This is a fork of @jakesidsmith/jest-matcher-react-shallow-snapshot.

    This is a jest matcher that allows you to easily create shallow snapshots of React components will full support for:

    • React.memo
    • React.forwardRef
    • React.Fragment
    • React.createContext (Provider and Consumer)
    • ReactDOM.createPortal
    • Functional components
    • Component classes

    The output of this matcher is far more informative than other existing solutions, providing context of memo wrapped components, fragments, etc, and does not require importing a renderer for each of your test files.

    This relies on react-shallow-renderer under the hood, which you could use without the jest matcher if you prefer / are using another test suite.

    Check out the react-shallow-renderer readme for some examples of the snapshot output.


    expect(<MyComponent />).toMatchReactShallowSnapshot();


    Install as a dev dependency (-D is short for --save-dev)

    npm i @dabapps/jest-matcher-react-shallow-snapshot -D


    Jest config

    This library requires you to define a setupFilesAfterEnv entry in your jest config (or setupTestFrameworkScriptFile for older versions of jest).

    This should point to a file which will be used to initialize custom matchers:

    module.exports = {
      setupFilesAfterEnv: [

    If you don't already have a such a file you should create one, and then simply import this library in that file:

    import '@dabapps/jest-matcher-react-shallow-snapshot';

    If you are using TypeScript, importing this file from your setup file should apply the types needed to call .toMatchReactShallowSnapshot. If it doesn't, then make sure that the setup file is included in your tsconfig.


    Now you can simply render a react component and expect it to match your shallow snapshot:

    expect(<MyComponent />).toMatchReactShallowSnapshot();

    Updating this fork from upstream

    Ensure you have added a remote upstream in git e.g.

    git remote add upstream git@github.com:JakeSidSmith/jest-matcher-react-shallow-snapshot.git

    Create a new branch (from master) and run the following to pull changes from upstream:

    git fetch upstream
    git pull upstream master


    npm i @dabapps/jest-matcher-react-shallow-snapshot

    DownloadsWeekly Downloads






    Unpacked Size

    10 kB

    Total Files


    Last publish


    • dabapps