While constructing a web app using CRA with Typescript and Jest for testing, I've encountered an unexpected error message
'Property 'toMatchSnapshot' does not exist on type 'Assertion'.Here's an example of a test where this error occurs:
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've attempted various solutions like updating Jest, as well as related packages, but none have resolved the issue.
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"
]
}
}