Javascript 角色=";“介绍”;出现在某些用户(而非其他用户)的材质UI图标中,中断快照测试
在我们的项目中,我们使用的是材质UI图标。然而,有些东西打破了我们的测试。对我来说,当我运行快照测试或在浏览器检查器中查看元素时,在元素上看不到Javascript 角色=";“介绍”;出现在某些用户(而非其他用户)的材质UI图标中,中断快照测试,javascript,reactjs,svg,material-ui,wai-aria,Javascript,Reactjs,Svg,Material Ui,Wai Aria,在我们的项目中,我们使用的是材质UI图标。然而,有些东西打破了我们的测试。对我来说,当我运行快照测试或在浏览器检查器中查看元素时,在元素上看不到role=“presentation”道具。然而,对于其他人来说,这个角色是存在的 我所看到的 项目中其他人看到的内容: 我不知道为什么。此外,我无法复制这一点。我创建了一个代码沙盒,但没有用 注: 1.我在Windows上,他们在Mac上 2.我们都使用Chrome浏览器 3.这些差异在运行Jest测试时也会出现 4.我们使用react测试库为
role=“presentation”
道具。然而,对于其他人来说,这个角色是存在的
我所看到的
项目中其他人看到的内容:
我不知道为什么。此外,我无法复制这一点。我创建了一个代码沙盒,但没有用
注:
1.我在Windows上,他们在Mac上
2.我们都使用Chrome浏览器
3.这些差异在运行Jest测试时也会出现
4.我们使用react测试库
为Jest测试呈现组件
5.我确认我们都安装了相同版本的materialui
作为一个实验,我让我的一位同事将SVG硬编码到页面中。执行此操作时,角色
不会出现
通过查看,我没有看到将设置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:仍然是一个问题。仍然无法找出是什么原因造成的