react-testing-library 相关问题


在react-testing-library中查询font-awesome元素

在我的渲染方法中我有 使用反应测试库...


react-testing-library:无法关闭 MUI Select 的下拉菜单

我有一个 SelectExample.js 从“react”导入 React, { useState }; 从“@mui/material”导入{InputLabel、MenuItem、FormControl、Select、Typography };> 导出默认fu...


在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。


Android Studio 由于“内部错误”而无法打开

`内部错误。请参考https://code.google.com/p/android/issues java.lang.AssertionError:无法读取/Users/arnavgupta/Library/Application Support/Google/AndroidStudio2023.1/


在 Windows 10 上的 Python3.8 中安装 charm-crypto 时出错

我不明白这个错误,有谁知道这个错误的含义是什么? (venv) C:\Users dmin\PycharmProjects\Testing>pip install charm-crypto==0.43 收集魅力加密==0.43 使用


如何让运行在 WSL2 上的节点服务器通过 LAN 转发,以便可以通过电话访问?

我尝试过以下方法: https://www.youtube.com/watch?v=yCK3easuYm4 https://medium.com/codemonday/access-wsl-localhost-from-lan-for-mobile-testing-8635697f008 https://superuser.com/questions/1679...


passport-azure-ad / msal.js 和动态作用域

Azure AD v2.0 讨论了动态同意的优点之一 (https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/api-scopes#request-dynamic-scopes- for-增量-c...


更改每个案例的 UI 测试区域

我正在使用 swift-snapshot-testing 库进行快照测试。对我来说,使用不同的本地化进行所有测试以在文本更改时检查所有 UI 非常重要。 例如,t...


Python 多处理 - 如何将 kwargs 传递给函数?

如何使用 Python 的多重处理将字典传递给函数?文档:https://docs.python.org/3.4/library/multiprocessing.html#reference 说要传递字典,但我保留了...


在这种情况下有“distinct-values()”的解决方法吗?

首次海报和 XPath 初学者。我希望你能帮助我解决我遇到的这个 XPath 问题。这是我的文件的简化示例。 第一次海报和 XPath 初学者。我希望你能帮助我解决我遇到的这个 XPath 问题。这是我的文件的简化示例。 <town> <library> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> </library> <library> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> <book> <title>GHI </title> </book> </section> </library> </town> 我试图通过 XPath 获得的是具有唯一“标题”的“book”元素,但在两个“library”元素中都是唯一的,而不是在根“town”节点中唯一的。 所以,根据我上面的例子,我期望得到第一个“library”的第一个“ABC”和第一个“DEF”,以及第一个“ABC”,第一个“DEF”和第一个“GHI”第二个“图书馆”。 distinct-values(//library[1]//book | //library[2]//book) 这可行,但我无法使用它,因为我需要使用 XPath 的 CMS 无法识别该功能... //library//book[not(./title = preceding::*/title)] 这不会选择第二个“库”中的第一个“ABC”和第一个“DEF”,我不明白为什么。有没有办法限制“前一个”轴的范围,使其停止在自己的“库”元素处? 如果有人理解我想要实现的目标,我将非常感谢任何帮助! 看来您使用的CMS仅支持XPath 1.0。首先游说他们改变这一点 - XPath 1.0 于 2007 年被 2.0 取代,现在应该已经成为历史。 这在单个 XPath 1.0 表达式中很难(也许不可能)完成。 (很难证明任何事情都是不可能的,但是你可以从 XPath 1.0 不是关系完备的前提开始,即它不支持整个一阶谓词演算;特别是它不支持范围变量.) 不幸的是,我不知道您还有哪些其他选择。


“forecast”包的安装具有非零退出状态

在 CentOS 上使用 R 版本 3.2.3 (2015-12-10) 我正在尝试 install.packages('forecast') 我明白了: install.packages('预测') 将软件包安装到“/usr/lib64/R/library”中 (因为“lib”是


将 EdgeList 作为 unordered_set 存储在 Boost Graph Library 上

我正在重现一个科学实验,我需要将图的边集存储为无序集。我正在尝试使用 BGL adjacency_graph,我认为最后一个参数是 hash_...


Lottie 动画文件未显示

我试图在我的项目中添加很多动画,但它根本没有显示在浏览器中。我可以检查元素并在 head 标签中查看 BODYMOVING LIBRARY,以及下面的脚本...


Homebrew 无法安装 SDL_image 和 SDL_ttf(macos 版本 10.13.6 High Sierra)

当我尝试使用自制程序安装时 酿造安装sdl2_ttf 这就是我所拥有的 /Users/mac/Library/Logs/Homebrew/ninja/01.python3 的最后 15 行: 运行时: clang++ -MMD -MT build/build...


我无法打印onChange的值

从“react”导入React; 从“react-input-mask”导入InputMask; 从“./inputMask.module.scss”导入样式; 从“反应...


无法在react-三纤维中导入dat.gui

对于使用react- Three-Fiber制作的项目,我导入了以下库: 从 '三' 导入 * 作为三; 从“react”导入 React, { Suspense, useState }; 导入 { 画布,useLoader }


为什么我导入 React 时服务器返回 MIME 类型为“text/html”?

这是我的js: 从'./node_modules/react'导入React; 从'./node_modules/react-dom'导入ReactDOM; 让 thePage = React.createElement( '主要的', 无效的, '哈哈' ); ReactDOM.render(thePage,


尽管已安装,但找不到模块“@tanstack/react-table”

我正在开发一个 TypeScript React 项目,我正在尝试从 columns.tsx 文件中的 @tanstack/react-table 导入 ColumnDef。 从“@tanstack/react-table”导入{ColumnDef}; 出口...


创建新的 React 应用程序时遇到麻烦

当我尝试创建一个新的 React 应用程序时,我收到以下错误消息, 安装软件包。这可能需要几分钟。安装中 React、react-dom 和带有 cra-temp 的 React-scripts...


在React版本18中使用react-facebook-login

我希望将react-facebook-login库与React版本18一起使用,但我无法安装该包。 npm 在控制台上抛出错误? 该库是否支持 Reac 18 版本...


如何在 EAS 构建中使用 React Native Reanimated?

我按照react-native-reanimated文档的安装说明创建了两次相同的应用程序https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/ge...


React-select:虚拟化选项列表

在最新版本的react-select(3.1.0)中虚拟化选项列表的预期方式是什么? 有react-virtualized-select,但不再支持。谢谢。


升级到 React 18 后 React App 未渲染

`我的 React 应用程序运行良好,但升级到 React 18、mui v5 和 redux v5 后,它没有渲染任何内容。 在终端中,我得到: webpack 编译成功 但在 chrome 控制台中...


反应问题,当我将标头组件添加到我的主页组件时,没有任何内容加载

从“react”导入React; 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航; 导入首页


元素未显示在 React Native 上

电流输出: 预期输出: 当前代码实施: 从“反应”导入反应 从 'react-native-svg-charts' 导入 { LineChart, XAxis, YAxis } 从 'react-native' 导入 { View, Text }


create-react 应用程序的替代品是什么

我有一个基于 Create React App 构建的 React 项目,我正在探索替代构建工具。有哪些推荐的方法或工具可以从 Create React App 迁移出来?有什么经历或


饼图未使用 Chart 在 React 中渲染

我在使用react-chartjs-2库和Chart.js在React组件中渲染饼图时遇到问题。图表的数据是从 API 获取的,图表预计


带斜杠的边框半径在 React-pdf 中不起作用

我知道我们可以在CSS中为半圆设置border-radius: 4px/2px。 但它在 React pdf 中不起作用。 我尝试过这些。 我知道我们可以在CSS中为半圆设置border-radius: 4px/2px。 但它在 React pdf 中不起作用。 我尝试过这些。 你好 我导入了所有 React pdf 元素。但是当我尝试上述设计时,我在控制台中收到错误。 错误是 @react-pdf_renderer.js?v=e8b1cced:113701 Error: unsupported number: NaN at number2 (@react-pdf_renderer.js?v=e8b1cced:58798:11) at PDFDocument2.lineTo (@react-pdf_renderer.js?v=e8b1cced:59998:28) at clipNode2 (@react-pdf_renderer.js?v=e8b1cced:32924:7) at renderBackground3 (@react-pdf_renderer.js?v=e8b1cced:34087:5) at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34139:3) at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12) at Array.forEach (<anonymous>) at renderChildren2 (@react-pdf_renderer.js?v=e8b1cced:34125:12) at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34145:5) at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12) 有人可以帮忙吗 测试此类语法的最简单方法是在 repl 中https://react-pdf.org/repl 简短的回答是 4px/2 不是单个 px 值,因此 = NAN 使用任何其他单个愚蠢的数字即可。


jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel 不是函数(React)

我正在制作一个网络应用程序,我需要在其中实现猫头鹰旋转木马。 我的组件“TopEventSection.jsx”文件: 从“react”导入React,{useEffect}; 从&q导入img...


d3 svg 与 nextjs mouseenter 仅触发一次

我正在开发一个 React 组件,该组件使用了 D3,但是 svg 圆圈仅触发一次。 从 'react' 导入 React, { useEffect, useRef, useState }; 从 'd3' 导入 * 作为 d3; 导入


我的 nextjs 项目中的信号存在一些问题

“使用客户端”; 从“react”导入 React, { useEffect, useState }; 从“framer-motion”导入{ AnimatePresence,运动}; 从“...


React 图标未解析

编译失败。 找不到模块:错误:无法解析“C:\Users\janan\OneDrive\Desktop\dukaan”中的“react-icons/ai” 伊什扬\sr


有没有办法清除react中的react历史记录?

我有一个针对移动用户的 Web 应用程序,但由于我们的客户不需要移动应用程序,因此它是使用 React 开发的。我已经使用 React Router 实现了应用内路由。我用


如何从 React Native 项目中删除 Kotlin

我之前在Flutter工作,现在切换到React Native,但是当我创建新的React Native项目时,kotlinversion和ndkversion会自动添加到项目中的build.gradle文件中。 嗬...


反应单元测试“不是函数”对象。<anonymous>

努力为使用 redux/sagas 的文件编写一些单元测试。 app.tsx 文件看起来像这样 从 'react' 导入 React, { StrictMode } 从'react-dom'导入ReactDOM 导入 { Provider } f...


在 React Native 中检索 IMEI 号码

我正在开发 React Native 应用程序,需要检索特定用例的设备的 IMEI 号码。 在 React Native 中是否有推荐且安全的方法来获取 IMEI 号码?


MathJax 未使用 ReactMarkdown 在 React 中渲染 LaTeX

我目前在 React 应用程序中面临 MathJax 和 ReactMarkdown 的问题。我已经设置了一个使用 better-react-mathjax 来渲染 Markdown 内容的组件,包括 LaTeX math express...


signals-react中effect和useSignalEffect的区别

这个问题不是问题,只是出于教育目的。 我正在react应用程序中尝试来自@preact/signals-react的effect和useSignalEffect。 问题是我看到效果并使用SignalEffec...


React 和 Flask-login - 检查用户是否登录

我在前端使用 React 18.2,在后端使用 Flask 登录。 这是一个 RestAPI 设置,身份验证将使用会话。 我自己实现了登录,React 发送登录


将 React Native 版本升级到 0.72.3 时出错:任务 ':invertase_react-native-apple-authentication:' 执行失败

我正在将我的 React Native 项目从版本 0.64.4 更新到 0.72.3。为了帮助更新,我一直在遵循 React Native Upgrade Helper (https://


从 html 中提取 <h2> 标题文本,其中标题文本可能包含换行符

我有一个 html 文件,其中包含一些 标签,例如 一个<- ' 我有一个 html 文件,其中包含一些 <h2> 标签,例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"&lt;folder&gt;PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题: str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果: str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑:从评论来看,这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析,但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式: library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join" 这是一个辅助函数,它将选择具有跨度的 H2 元素,但会忽略跨度 library(xml2) geth2 <- function(x) { temp <- read_html(x) %>% xml_find_all("//h2[span]") xml_remove(xml_find_all(temp, ".//span")) temp %>% xml_text() %>% stringr::str_squish() } geth2(a) # [1] "Standardising PISA results" geth2(b) # [1] "Linking data using left_join"


如何在 RTL 测试中使用 React Redux useDispatch 钩子?

我想在使用 redux 调度后测试 React 组件。我正在使用“test-utils.ts”文件中的自定义渲染函数: 从 'react' 导入 { ReactElement } 导入{渲染,渲染O...


任务':react-native-health-connect:compileDebugKotlin'执行失败

我试图将react-native-health-connect添加到我们的React Native应用程序中。添加此库后,我将最小 SDK 更改为 26,将compileSdkVersion 更改为 34。在这些更改之后,


react-native(博览会)中的输入无法在网络上打开(混合应用程序)

我正在使用react-native(expo)创建一个应用程序混合体,以及一些类似的库: ` “依赖项”:{ "@apollo/client": "^3.8.4", “@gluestack-style/react&q...


React JS - 状态管理

我最近一直在学习React,我尝试构建一个小型网络应用程序来学习React。我对国家管理有疑问。 我现在没有使用任何库进行状态管理,而且......


React store.getState 不是一个函数

这是我的代码: 商店.js 从 'redux' 导入 {createStore, applyMiddleware, compose}; 从“不可变”导入{fromJS}; 从“react-router-redux”导入{routerMiddleware}; 导入createSagaMidd...


Shadow-cljs 需要反应选择

目前我需要使用 ["react-select" :default Select] 来创建组件: (def dropdown-standard (ra/adapt-react-class Select)) (这非常有效) 我想访问...


在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败

我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。 我运行了以下命令: % npx create-react-app REDACTED --模板打字稿


Tanstack React 查询未导入

我正在尝试将 tanstack React 查询实现到我正在开发的项目中来管理状态。 我正在尝试将其与使用 nextjs 13 的 React 查询的教程一起设置,虽然我觉得我...


React Router:第一次访问 ParentNotificationsPage 组件时不显示数据,仅在返回后才显示

我在 React 应用程序中遇到了 React Router 的问题,其中 ParentNotificationsPage 组件在第一次访问时不显示数据。仅当我导航回


© www.soinside.com 2019 - 2024. All rights reserved.