18

I am trying to test a react typescript project using jest but it's giving a confusing error:

Error image

Here is my package.json:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "jest": "^27.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "ts-jest": "^27.1.4",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4",
},

"devDependencies": {
    "@types/react-test-renderer": "^18.0.0",
    "react-test-renderer": "^18.1.0"
}

I wrote this basic test which gives the error:

import renderer from 'react-test-renderer'
import AddShipmentButton from './AddShipmentButton'

it('works', () => {
    const tree = renderer.create(<AddShipmentButton />).toJSON()
    expect(tree).toMatchSnapshot()
})

I had to install the dependencies using --legacy-peer-deps. What could be the issue? Thanks in advance.

Sadman Yasar Sayem
  • 851
  • 1
  • 5
  • 10

4 Answers4

56

The problem was that I installed the latest version of react-test-renderer v18.0.1 when the React version is v17.0.2. Installing react-test-renderer version 17.0.2 solved this issue.

Sadman Yasar Sayem
  • 851
  • 1
  • 5
  • 10
8

Upgrade your app dependencies like this

"react": "~18.0.0",
 "react-dom": "^18.0.0", 
 "react-test-renderer": "^18.0.0"

import is wrong as defined on React docs, try with this way

import TestRenderer from 'react-test-renderer';

import AddShipmentButton from './AddShipmentButton'

it('works', () => {
  const tree = TestRenderer.create(<AddShipmentButton />).toJSON()
  expect(tree).toMatchSnapshot()
})

Read usage of TestRenderer here

Hakob Sargsyan
  • 1,294
  • 1
  • 9
  • 15
  • Changing `renderer` to `TestRenderer` doesn't do anything. – wvdz May 06 '22 at 10:58
  • I see you are downgrade your dependencies you can also upgrade and use like this ,"react": "~18.0.0", "react-dom": "^18.0.0", "react-test-renderer": "^18.0.0" , anyway on react docs used TestRenderer instead of renderer. https://reactjs.org/docs/test-renderer.html – Hakob Sargsyan May 06 '22 at 12:18
  • `import something from '...'` imports the default export from that module. You can give it any name you want, it doesn't matter. – wvdz May 06 '22 at 12:32
  • Ok I have a check you are right , write what you want )) , for me good aproach use documentation style, you can directly use import { create } from "react-test-renderer" and use it instead , in your code no other usage of TestRenderer , upgrade will be fixed your problem also. Thank you for information @wvdz – Hakob Sargsyan May 06 '22 at 13:05
1

Make sure you are using the same version of react and react-test-renderer

You can change the version of node package using npm install [package-name]@[version-number]

Ahsan Farooq
  • 819
  • 9
  • 10
0

Downgrade your react and react-dom version to a more stable version (17.0.0).

Initially I had the following dependencies and was getting the same error

"react": "^18.0.2",
"react-dom": "^18.0.2"

But once I downgraded my dependencies to

"react": "^17.0.0",
"react-dom": "^17.0.0"

The error was resolved

Daphine Nalule
  • 1