Cannot find module 'enzyme' from 'src/setupTests.js' - reactjs

Question

I'm trying to test a react component using both jest and enzyme, i've installed the necessary package for them, then configured my setupTests.js as shown below, but still have the same error that Enzyme module is not found, and "shallow" as well.
this is where i am trying to use Shallow from enzyme
import React from "react";
import { render, screen, cleanup } from '#testing-library/react'
import { shallow } from "#wojtekmaj/enzyme-adapter-react-17"
//some necessary local imports
// some other tests
describe('Welcome Component', () => {
it('renders Button component', () => {
const wrapper = shallow(<Welcome />);
expect(wrapper.containsMatchingElement(<NextButton text={"Next"}/>)).toEqual(true);
});
});
this is my setupTests.js
import '#testing-library/jest-dom';
import enzyme from 'enzyme';
import Adapter from '#wojtekmaj/enzyme-adapter-react-17';
enzyme.configure({ adapter: new Adapter() });
and here is my package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#fontsource/rubik": "^4.5.0",
"#material-ui/core": "^4.12.3",
"#mui/core": "^5.0.0-alpha.54",
"#mui/material": "^5.2.3",
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/react": "^17.0.33",
"ajv": "^8.8.2",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"enzyme": "^3.11.0",
"formik": "^2.2.9",
"fs": "0.0.1-security",
"icomoon-react": "^2.0.19",
"jest": "^27.4.5",
"jodit-react": "^1.1.11",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"lodash-redux-immutability": "0.0.3",
"popper.js": "^1.16.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-contenteditable": "^3.3.6",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-lottie": "^1.2.3",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-split": "^2.0.13",
"react-split-pane": "^0.1.92",
"react-toast-notifications": "^2.5.1",
"react-web-vector-icons": "^1.0.2",
"redux-persist": "^6.0.0",
"redux-subscriber": "^1.1.0",
"reselect": "^4.1.5",
"web-vitals": "^1.0.1",
"xml2js": "^0.4.23",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"sass": "^1.43.2",
"sass-loader": "^12.2.0"
}
}

Answer 1

Install all these dependencies in dev. In my case I am using typescript, if
you are using javascript, skip types. Run npm i -D and all these
dependencies.
#types/enzyme
#types/enzyme-adapter-react-16
enzyme
enzyme-adapter-react-16
jest-environment-enzyme
jest-enzyme
#testing-library/jest-dom
#testing-library/react
#testing-library/user-event
#types/jest
ts-jest
In root of your project, create a file named jest.config.js and inside put this code :
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
modulePathIgnorePatterns: ["/dist/"],
};
In the same root of the project, create a file called jest.config.unit.js and put this code there:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
modulePathIgnorePatterns: ["<rootDir>/dist/"],
setupFilesAfterEnv: ["jest-enzyme"],
setupFiles: ['<rootDir>/src/setupEnzyme.ts'],
// ignore .js files
testRegex: '(/__tests__/.*|(\\.|/)(test))\\.[t]sx?$',
coverageReporters: ["lcov", "text"],
coverageDirectory: "test-coverage",
coverageThreshold: {
global: {
branches: 0,
functions: 0,
lines: 0,
statements: 0
}
}
};
Go to src folder, and create this file: setupEnzyme.ts(js), inside put this code:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
In src folder, create a file setupTests.ts(js) and put this code inside:
import '#testing-library/jest-dom';
Finally go to package.json, and under the scripts add this
"test": "jest -c jest.config.unit.js",
You are all set up. Create some test component, like Test.js which returns a simple div. Create a correspondent Test.test.js and add this test code:
import { shallow } from 'enzyme';
import { Test } from './test';
describe('<Test /> renders correctly', () => {
it('Renders correctly', () => {
const wrapper = shallow(<Test />);
expect(wrapper).toMatchSnapshot();
});
});
And if you run npm run test it should work.