Update React Scripts, ESLint and testing packages #3659
Conversation
| "eslint-config-prettier": "^6.10.0", | ||
| "eslint-plugin-import": "^2.16.0", | ||
| "eslint-plugin-jest": "^23.8.2", | ||
| "eslint-plugin-jsx-a11y": "^6.2.1", | ||
| "eslint-plugin-prettier": "^3.1.2", | ||
| "eslint-plugin-react": "^7.12.4", | ||
| "eslint-plugin-react-hooks": "^2.5.0", |
There was a problem hiding this comment.
These ESLint plugins are included in react-scripts eslint config.
tacigar
changed the title
|
|
||
| import ServiceBadge from './ServiceBadge'; | ||
| import { render, screen } from '@testing-library/react'; |
There was a problem hiding this comment.
Use @testing-library/react instead of enzyme since all other test code already uses it.
Now we can remove enzyme from package.json.
| "@types/enzyme": "^3.10.5", | ||
| "@types/enzyme-adapter-react-16": "^1.0.6", | ||
| "@testing-library/jest-dom": "6.1.5", | ||
| "@testing-library/react": "12.1.5", |
There was a problem hiding this comment.
This is not the latest version.
testing-library/react 13+ requires React v18, but we still use React v16, so I could not update to the latest version (14.1.2).
| 'prettier/@typescript-eslint', | ||
| 'prettier/react', | ||
| ], | ||
| extends: ['plugin:prettier/recommended', 'react-app', 'react-app/jest'], |
There was a problem hiding this comment.
Remove
airbnb-typescriptprettier/@typescript-eslintprettier/react
and extend react-scrtips eslint configs.
| "enzyme": "^3.7.0", | ||
| "enzyme-adapter-react-16": "^1.7.0", |
There was a problem hiding this comment.
Now enzyme is not used. All test code is only using testing-library.
| "@testing-library/jest-dom": "^5.5.0", | ||
| "@testing-library/react": "^10.0.2", | ||
| "@testing-library/react-hooks": "^3.2.1", | ||
| "@testing-library/user-event": "^10.0.2", |
There was a problem hiding this comment.
Currently @testing-library/user-event is not used in the test code.
| "fetch-mock": "^9.4.0", | ||
| "history": "^4.10.1", | ||
| "http-proxy-middleware": "2.0.6", | ||
| "jest-environment-jsdom-sixteen": "^1.0.3", |
There was a problem hiding this comment.
https://www.npmjs.com/package/jest-environment-jsdom-sixteen
jest@26 ships with jsdom@16, so there is no reason to use this module
| const { getByTestId } = render(<LanguageSelector />); | ||
| const changeLanguageButton = getByTestId('change-language-button'); | ||
| render(<LanguageSelector />); | ||
| const changeLanguageButton = screen.getByTestId('change-language-button'); |
There was a problem hiding this comment.
| const components = await waitForElement(() => | ||
| getAllByTestId('dependencies-graph'), | ||
| ); | ||
| const components = await screen.findAllByTestId('dependencies-graph'); |
There was a problem hiding this comment.
tacigar
changed the title
|
Thanks @anuraaga !! |
This PR includes code changes, but they are all fixes to pass the linter.