TypeError: Cannot redefine property: useDispatch at Function.defineProperty (<anonymous>)

sgidd commented 1 year ago

Version

27.0.6

Steps to reproduce

I am getting test error while asserting for the redux actions:

let useDispatchSpy, mockDispatchFn; beforeEach(() => { useDispatchSpy = jest.spyOn(Redux, 'useDispatch'); mockDispatchFn = jest.fn(); useDispatchSpy.mockReturnValue(mockDispatchFn); });

Expected behavior

It used to run before but after upgrading react version to 17.0.2 i see its giving error while running the test:

expected is to run the tests as before and any better way to change the logic to assert redux actions.

Actual behavior

Tests failing with error mentioned

Additional context

Below is my code :

` it('should render the StepAccordion with the passed config', async () => { const actions = store.getActions(); renderWithProviders( <StepsAccordion stepsConfig={domainConfig} stepsData={initialActiveDomainState} />, {store} );

expect(screen.getByText('Step 1: Create Domain')).toBeInTheDocument();
userEvent.click(screen.getByText('Step 1: Create Domain'));
await waitFor(() => {
  expect(mockDispatchFn).toHaveBeenCalledTimes(1);
  expect(mockDispatchFn.mock.calls[0][0]).toMatchObject({
    type: internalActions.setCurrentStep.type,
    payload: 1,
  });
});

});`

Environment

Node : 16.15.1
React: 17.0.2
Jest: 27.0.6
@testing-library/react: 12.0.0
@testing-library/jest-dom: "^5.14.1,

mrazauskas commented 1 year ago

Would you be able to provide minimal reproduction repo? There are too many moving parts. It is not clear where did the error originate from.

Also try to upgrade Jest, @testing-library and all other testing dependencies to the latest versions. The bug might be fixed already.

sgidd commented 1 year ago

Would you be able to provide minimal reproduction repo? There are too many moving parts. It is not clear where did the error originate from.

Also try to upgrade Jest, @testing-library and all other testing dependencies to the latest versions. The bug might be fixed already.

I have upgraded below libs to latest but no luck , facing same error while running tests:

"@testing-library/jest-dom": "6.1.2", "@testing-library/react": "14.0.0", jest and jest-environment-jsdom to 29.6.4

sgidd commented 1 year ago

Would you be able to provide minimal reproduction repo? There are too many moving parts. It is not clear where did the error originate from.

Also try to upgrade Jest, @testing-library and all other testing dependencies to the latest versions. The bug might be fixed already.

Below is my packge.json file { "private": true, "name": "bre-react", "license": "ISC", "version": "0.1.0", "scripts": { "prebuild": "npm run tinymce-postinstall", "build": "webpack --mode production --env BASE_URL=/api", "predev": "npm run tinymce-postinstall", "dev": "npm run webpack-dev", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --fix --ext .js,.ts,.tsx", "start": "node server.js", "test": "jest", "test:coverage": "jest --coverage", "test:watch": "jest --watch", "tinymce-postinstall": "node ./tinymce-postinstall.js", "type-check": "tsc", "webpack-dev": "webpack serve --env BASE_URL=http://localhost:7900/api --env PROXY_URL=https://dev.rds-cbpas-np.solutions.iqvia.com --mode development" }, "dependencies": { "@azure/msal-browser": "^2.8.0", "@azure/msal-react": "^1.0.0-alpha.1", "@babel/core": "^7.22.9", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-transform-react-jsx": "^7.22.5", "@babel/plugin-transform-runtime": "^7.22.9", "@babel/plugin-transform-typescript": "^7.22.9", "@babel/preset-env": "^7.22.9", "@emotion/core": "^11.0.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.3", "@reduxjs/toolkit": "^1.9.5", "@tinymce/tinymce-react": "^4.2.0", "@types/react-dom": "^17.0.0", "ajv": "^8.12.0", "apollo-react": "https://imshealth.myget.org/F/apollo/auth/0defb5c7-ac68-48fa-85b5-dba990f382c1/npm/apollo-react/-/4.4.0", "apollo-react-icons": "https://imshealth.myget.org/F/apollo/auth/0defb5c7-ac68-48fa-85b5-dba990f382c1/npm/apollo-react-icons/-/2.0.0", "axios": "^0.21.1", "babel-jest": "^29.6.2", "babel-loader": "^9.1.3", "babel-plugin-const-enum": "^1.2.0", "babel-plugin-emotion": "^11.0.0", "babel-polyfill": "^6.26.0", "chart.js": "^3.7.0", "chartjs-plugin-datalabels": "^2.0.0", "compression-webpack-plugin": "^7.1.1", "connect-history-api-fallback": "^1.6.0", "core-js": "3.6.5", "css-loader": "3.4.1", "date-fns": "^2.25.0", "draft-js": "^0.11.7", "draftjs-to-html": "^0.9.1", "env-var": "2.4.3", "express": "4.17.1", "formik": "^2.1.5", "fs-extra": "^10.1.0", "html-loader": "0.5.5", "html-to-draftjs": "^1.5.0", "html-webpack-plugin": "^5.0.0-beta.4", "immer": "^9.0.5", "immutable": "^4.1.0", "ini": "^2.0.0", "lodash": "^4.17.20", "match-sorter": "^6.3.0", "moment": "^2.29.1", "normalize.css": "8.0.0", "passive-events-support": "^1.0.33", "react": "^17.0.2", "react-app-polyfill": "^2.0.0", "react-chartjs-2": "^4.0.1", "react-dev-utils": "5.0.2", "react-dom": "^17.0.2", "react-draft-wysiwyg": "^1.14.7", "react-dual-listbox": "^2.2.0", "react-redux": "^8.1.2", "react-router-dom": "^5.2.0", "react-toastify": "^6.0.8", "react-virtualized": "^9.22.3", "redux": "^4.2.1", "redux-mock-store": "^1.5.4", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "reduxsauce": "^1.2.0", "regenerator-runtime": "0.13.5", "style-loader": "0.21.0", "svg-url-loader": "^6.0.0", "tinymce": "^6.2.0", "typescript": "3.7.5", "url-loader": "^4.1.1", "webpack": "^5.36.2", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2", "webpack-merge": "^5.7.3", "xlsx-js-style": "^1.2.0", "yup": "^0.29.3" }, "devDependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.1.9", "@types/autosuggest-highlight": "^3.1.1", "@types/faker": "4.1.5", "@types/jest": "^26.0.24", "@types/lodash": "4.14.108", "@types/node": "10.17.16", "@types/react": "^17.0.0", "@types/react-redux": "7.1.4", "@types/react-router-dom": "^5.1.6", "@types/redux-mock-store": "^1.0.2", "@types/yup": "^0.29.6", "@typescript-eslint/eslint-plugin": "^3.10.1", "@typescript-eslint/parser": "^3.10.1", "eslint": "^7.24.0", "eslint-config-prettier": "^6.13.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.6", "eslint-plugin-react-hooks": "^4.1.0", "http-server": "0.12.3", "husky": "^4.2.5", "jest": "^27.0.6", "jest-sonar-reporter": "^2.0.0", "lint-staged": "^10.2.13", "prettier": "^2.1.2", "prettier-package-json": "2.1.3", "webpack-bundle-analyzer": "^4.3.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "ie 11" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] }, "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "npm run test" } }, "lint-staged": { "package.json": [ "prettier-package-json --write" ], "{src,cypress,__{tests,mocks}__}/**/*.{js,ts,tsx}": [ "prettier --write", "eslint . --fix --ext .js,.ts,.tsx" ], "{src,cypress,__{tests,mocks}__}/**/*.{json,css,md}": [ "prettier --write" ] } }

sgidd commented 1 year ago

i am also getting below warning :

console.warn MUI: You can not use the minRows or maxRows props when the input rows prop is set.

i am facing all these issues after upgrading React to 17, apollo-react internal css library written over MUI . this apollo react in turn installs mui v5 lib's after that i am facing these issue while running my tests in local and also gitlab CI

jrmann100 commented 11 months ago

I solved a similar issue by removing the spyOn() and replacing it with this mock at the top-level:

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useDispatch: () => jest.fn(),
}));

Sources:

github-actions[bot] commented 11 months ago

As noted in the Bug Report template, all bug reports requires a minimal reproduction. Please open up a new issue providing one. Read more at https://stackoverflow.com/help/minimal-reproducible-example.

github-actions[bot] commented 10 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

jestjs / jest