В нашем проекте мы используем значки Material-UI. Однако что-то ломает наши тесты. Для меня, когда я запускаю тесты моментальных снимков или просматриваю элементы в инспекторе браузера, я не вижу role="presentation" опору для элементов. Для всех остальных, однако, роль присутствует.
Что я вижу
<svg
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
aria-hidden="true"
>
То, что видят все остальные в проекте:
<svg
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
aria-hidden="true"
role="presentation"
>
Понятия не имею Почему. Кроме того, я не могу воспроизвести это. Я создал коды и поле здесь безрезультатно.
Примечания: 1. Я на Windows, они на Mac 2. Мы все используем браузер Chrome 3. Эти различия появляются также при запуске Jest-тестов 4. Мы используем react-testing-library для рендеринга компонентов для Jest-тестов 5. Я подтвердил, что у всех нас установлена одна и та же версия material-ui
В качестве эксперимента у меня был один из моих коллег Жесткий код SVG на страницу. При этом role не появляется.
Просматривая github material-UI , я нигде не видел, чтобы было установлено role="presentation".
Кто-нибудь слышал о такой проблеме? Я даже не знаю, что еще нужно исследовать или проверить.
Для справки, вот наши пакеты:
"dependencies": {
"@babel/polyfill": "7.4.3",
"axios": "^0.19.0",
"blob-stream": "^0.1.3",
"chalk": "2.4.2",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.4.0",
"cross-env": "5.2.0",
"date-fns": "^2.10.0",
"dotenv": "^8.2.0",
"express": "4.16.4",
"fontfaceobserver": "2.1.0",
"formik": "^2.0.2",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"immer": "3.0.0",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"minimist": "1.2.0",
"node-sass": "4.12.0",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-helmet": "6.0.0-beta",
"react-intl": "2.8.0",
"react-modal": "^3.11.1",
"react-redux": "7.1.1",
"react-router-dom": "5.0.1",
"react-wordcloud": "^1.2.2",
"recharts": "^1.8.5",
"redux": "4.0.4",
"redux-saga": "1.0.5",
"reselect": "4.0.0",
"sanitize.css": "11.0.0",
"sass-loader": "7.2.0",
"uswds": "2.1.0"
},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-modules-commonjs": "7.4.3",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.4.3",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.4.0",
"@fortawesome/fontawesome-svg-core": "1.2.22",
"@fortawesome/free-solid-svg-icons": "5.10.2",
"@fortawesome/react-fontawesome": "0.1.4",
"add-asset-html-webpack-plugin": "3.1.3",
"axe-core": "^3.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "24.7.1",
"jest-dom": "3.1.3",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"null-loader": "0.1.1",
"plop": "2.3.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"react-app-polyfill": "0.2.2",
"react-axe": "^3.3.0",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"rimraf": "2.6.3",
"shelljs": "0.8.3",
"@odw/fda-opioids-styleguide": "file:./../fda-opioids-styleguide",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-prettier": "5.2.0",
"stylelint-config-recommended-scss": "3.3.0",
"stylelint-prettier": "1.1.1",
"stylelint-scss": "3.9.4",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "4.0.0",
"whatwg-fetch": "3.0.0"
}
Обновление 5/7/20: Все еще проблема. До сих пор не удалось выяснить, что является причиной этого.