I am using CRA to build a web app that also uses Typescript, and Jest for (snapshot) testing. I am randomly now getting the error Property 'toMatchSnapshot' does not exist on type 'Assertion'. across all my snapshot tests.

Here is an example test where I am getting this error:

import { BrowserRouter } from 'react-router-dom';
import renderer from 'react-test-renderer';


describe('<Button />', () => {
  test('Button should render with mandatory props', () => {
    const tree = renderer
      .create(
        <BrowserRouter>
          <Button text="Test Text" />
        </BrowserRouter>
      )
      .toJSON();
    expect(tree).toMatchSnapshot(); <-- Error here
  });
}

I have tried various solutions such as updating Jest, and updating related packages and nothing seems to work.

My Package.json:

{
  "name": "webapp",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "react-scripts start",
    "cypress:open": "cypress open"
  },
  "dependencies": {
    "@babel/core": "^7.19.1",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@react-spring/web": "^9.5.5",
    "@types/socket.io-client": "^3.0.0",
    "axios": "^0.27.2",
    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-router-dom": "^6.4.3",
    "react-scripts": "^5.0.1",
    "socket.io-client": "^4.5.1",
    "uuid": "^9.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^13.0.3",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
    "@types/cypress-cucumber-preprocessor": "^4.0.1",
    "@types/jest": "^29.0.3",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@types/react-test-renderer": "^18.0.0",
    "autoprefixer": "^10.4.7",
    "cypress": "^10.11.0",
    "eslint": "^8.20.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.1.2",
    "postcss": "^8.4.14",
    "react-test-renderer": "^18.2.0",
    "tailwindcss": "^3.1.6",
    "ts-jest": "^29.0.1",
    "typescript": "^4.8.3"
  },
  "jest": {
    "clearMocks": true,
    "transform": {
      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    "testEnvironment": "jsdom"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "cypress/e2e/**/*.ts"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am using CRA to build a web app that also uses Typescript, and Jest for (snapshot) testing. I am randomly now getting the error Property 'toMatchSnapshot' does not exist on type 'Assertion'. across all my snapshot tests.

Here is an example test where I am getting this error:

import { BrowserRouter } from 'react-router-dom';
import renderer from 'react-test-renderer';


describe('<Button />', () => {
  test('Button should render with mandatory props', () => {
    const tree = renderer
      .create(
        <BrowserRouter>
          <Button text="Test Text" />
        </BrowserRouter>
      )
      .toJSON();
    expect(tree).toMatchSnapshot(); <-- Error here
  });
}

I have tried various solutions such as updating Jest, and updating related packages and nothing seems to work.

My Package.json:

{
  "name": "webapp",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "react-scripts start",
    "cypress:open": "cypress open"
  },
  "dependencies": {
    "@babel/core": "^7.19.1",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@react-spring/web": "^9.5.5",
    "@types/socket.io-client": "^3.0.0",
    "axios": "^0.27.2",
    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-router-dom": "^6.4.3",
    "react-scripts": "^5.0.1",
    "socket.io-client": "^4.5.1",
    "uuid": "^9.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^13.0.3",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
    "@types/cypress-cucumber-preprocessor": "^4.0.1",
    "@types/jest": "^29.0.3",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@types/react-test-renderer": "^18.0.0",
    "autoprefixer": "^10.4.7",
    "cypress": "^10.11.0",
    "eslint": "^8.20.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.1.2",
    "postcss": "^8.4.14",
    "react-test-renderer": "^18.2.0",
    "tailwindcss": "^3.1.6",
    "ts-jest": "^29.0.1",
    "typescript": "^4.8.3"
  },
  "jest": {
    "clearMocks": true,
    "transform": {
      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    "testEnvironment": "jsdom"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "cypress/e2e/**/*.ts"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• javascript
• typescript
• jestjs
• snapshot-testing

1 Answer 1

It looks like you have cypress installed, which seems to be conflicting with Jest's types. See Cypress causing type errors in jest assertions