首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React App中,您应该将仅在测试中使用的文件放在哪里(json...)?

在React App中,您应该将仅在测试中使用的文件放在src文件夹中的一个名为__tests__的文件夹中。这是React应用程序中用于存放测试文件的约定位置。在__tests__文件夹中,您可以存放与测试相关的任何文件,包括json文件。

通过这种方式,您可以将测试文件与其他源代码文件分开,以便更好地组织和管理它们。这也有助于确保您的测试文件不会被错误地包含在最终构建的应用程序中。

对于存放json文件,您可以在__tests__文件夹中直接创建一个json文件,或者根据需要创建一个子文件夹来组织不同类型的测试文件。请注意,由于React应用程序的安全性考虑,您应该避免将敏感信息存储在测试文件中。

推荐的腾讯云相关产品:腾讯云COS(对象存储服务),提供了海量数据存储和处理能力,可用于存储和管理您的测试文件。您可以通过以下链接详细了解腾讯云COS的相关信息和功能:

请注意,这仅是其中一种选择,您也可以根据实际需求选择其他适合的云存储服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 设计模式 0x0:典型反例和最佳实践

但是,列表每个项目都需要是唯一,因为 React 使用 key 来跟踪 DOM 所有记录。如果没有 key,React 无法知道添加、删除或修改了什么。...基本上,有两种命名约定,如下所示: Pascal Case(大驼峰命名法) Camel Case(小驼峰命名法) 无论组织或项目哪种大小写规范作为标准,请记住,命名文件夹、变量、函数或方法时应该让它们有一定意义...但我们应该记住一件事是文件/文件夹结构很重要,因为它给应用程序提供了方向感,告诉您在哪里放置/查找某些内容。制定文件结构时,您可以依据个人喜好,但也要始终考虑到接下来接手代码的人。...可以整个应用程序使用逻辑提取到一个组件,并在任何时候使用。这是另一种 DRY 技术,这将使免受许多代码行影响,并隔离错误。...这非常重要,因为随着应用程序增长,实施测试以避免问题变得非常重要。测试可以巩固代码,并确保功能和逻辑按预期工作。

1K10

使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

要设置它们每一个,我们既可以使用 yarn init(每个文件),也可以手动创建文件(例如,通过 IDE)。 软件包名称使用命名约定是每个软件包之前都使用 @my-app/* 作为前缀。...文件 本教程,common 软件包非常简单。首先,从添加新文件夹开始: src/ 文件夹,包含包代码。...我们案例,我们希望有一个可以运行 Node.js 应用程序环境。 WORKDIR 设置容器的当前工作目录。 COPY 文件文件夹从当前本地目录(项目的根目录)复制到容器工作目录。...如所见,在此步骤,我们仅复制与依赖项相关文件。这是因为 Docker 每个构建中命令每个结果缓存为一层。...添加 .dockerignore 使用 .dockerignore 文件不是强制性,但强烈建议使用以下文件: 确保没有垃圾文件复制到容器。 使 COPY 命令使用更加容易。

4.1K31
  • 你不知道 React 最佳实践

    仅在 React ,在所有的应用程序开发,通用规则都是尽可能保持代码简洁和小巧。 React 最佳实践指示保持无错误代码和精辟代码。...当您在 React 工作时,请记住使用是 JSX (JavaScript 扩展)而不是 HTML。 创建组件应该以大写 camel 命名,即 「Pascal Case」。...不仅仅是 React ,还应该在其他编程语言中进行测试测试非常重要,因为它确保代码能够按照预期方式运行,并且易于快速地进行测试。...最佳实践 components 文件创建一个 __test__ 文件夹。 使用组件名称作为测试文件 . test.js 前缀....如果编写更多测试用例,它将为代码提供更多测试覆盖率。 但是,至少你应该做一些崩溃组件测试

    3.2K10

    手把手教你实现全栈博客项目(2)-- 前端react-xxx、路由配置

    react-redux 配置说明 reducer 首先我们项目/app/reducers下新建一个index.js,用于导出所有的reducer。...index引入后,即为stateadmin节点。 configureStore 配置store文件。这个文件功能正如其名,就是配置store。其中我们主要做了如下工作。...最后倒入store,用于App使用react-router 配置说明 react-router配置主要在/container/index.js文件。该文件负责导出所有路由中文件。...关于admin为什么判断this.props.userInfo后续权限判断哪里会说到。以及会说这里遇到一些问题(重点)。这里我们还是只关注路由部分。再次强调,必须使用match 来取url。...后续随着开发,回往/app/reducers添加对应reducer。以及路由中添加新建页面。 如果您有更好想法,欢迎联系我。我们一起改进~ 如果有什么不明白地方,欢迎提issue。

    74130

    构建一套最佳React 组件文件结构

    为前端项目创建适当且可扩展文件结构可能是具有挑战性使用React这样非优化工具时,我们拥有很大自由度。 通常,当我们讨论文件结构时,讨论重点是整个项目。...Test 测试 为什么测试放在这里而不是放在单独tests目录?两个字-代管! 属于一起文件应该放在一起。如果您想象编辑或者删除组件过程,此方法好处变得非常明显。...出于上述所有相同原因,每个story及其相应组件并置在一起很重要。 Styles 样式文件 使用CSS-in-JS时,可以直接在组件文件创建样式化组件。...它们通常供主组件使用。 如果打算在整个应用程序中使用它们(如MenuItem示例所示),则应将它们重新导出到主索引文件。没有主要组件子组件应该是不可能。...我们应该将其从Menu组件取出,然后将其放在更高位置,也许放在我们常规utils文件

    1.1K10

    通过防止不必要重新渲染来优化 React 性能

    幸运是,在这种情况下,样式对象始终是相同,因此我们可以 App 组件之外创建一次,然后每次渲染时重新使用它。...键应该是唯一,并且列表任何两个元素都不应具有相同键。 我们上面使用 item.name 键并不理想,因为多个列表元素可能具有相同名称。...works if you use the full name: 您不能使用短语法()键添加到片段,但如果使用全名,它可以工作: ...如果周围 DOM 结构发生变化,子组件将被重新挂载。例如,这个应用程序列表周围添加了一个容器。 更现实应用程序,您可能会根据设置项目放在不同。...可能情况下,保持 DOM 结构相同。 例如,如果需要在列表组之间显示分隔符,请在列表元素之间插入分隔符,而不是为每个组添加包装 div。

    6.1K41

    React 设计模式 0x7:构建可伸缩应用程序

    下面是一些建议方式: pages 与页面名称相同,需要将所有页面放在文件 components 与组件名称相同,需要将所有组件放在文件文件包含 JSX 文件、CSS 文件和...因此,我们可以这些组件放在不同文件,如下所示: src ├── components │ ├── Login │ │ ├── Login.js │ │ ├── Login.css...让我们看看如何在 React.js 中使用 SOLID 原则: 单一职责原则(SRP) 意味着每个组件应该只做一件事 设计 React 应用程序时,请记住这个原则,因为它将使代码更易读和可维护 开闭原则...类,它扩展到另一个名为 Car 类,我们应该能够扩展类 Make 而不影响 Car 类功能 使用类组件或在 React使用 TypeScript 时是可能用到 接口隔离原则(ISP) 应该使用所需接口... React ,这可以说是 props props 每个 React 应用程序中非常重要,当这些 props 从父组件传递到子组件时,只应传递所需内容,而不是所有 props 内容 可以通过传递之前解构

    1.3K10

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    组件与视图 app/components/ 和 app/views 文件夹都包含 React 组件。 使用通常不会在代码库其他部分重用 UI 视图。 使用设计为高度可重用 UI 组件。...组件应该有一个关联 .stories.js 文件来记录它应该如何使用。...注意:你文件名必须是 .spec.jsx 否则 jest 不会运行它! 我们 setup.js 定义了有用 fixtures,使用这些!如果以重复方式定义模拟数据,则可能值得添加此文件。...仅在检查不存在时使用 queryBy... 仅当期望元素可能不会立即发生 DOM 更改后出现时才使用 await findBy......https://testing-playground.com/ 不要忘记,你可以测试任何地方放置 screen.debug() 来查看当前 DOM。 官方文档阅读有关查询更多信息。

    6.9K30

    40道ReactJS 面试问题及答案

    (意味着我们调用 setState() 时不应该依赖当前状态) 解决方案是一个函数传递给 setState(),并以先前状态作为参数。...要在 React使用动态键名称设置状态,可以 ES6 中使用计算属性名称。计算属性名称允许使用表达式来指定对象文字属性名称。...您可以通过使用 JSX autoFocus 属性或通过以编程方式输入元素集中功能组件 useEffect 挂钩或类组件 componentDidMount 生命周期方法输入元素集中页面加载上...j) 分析和优化 Webpack 捆绑包膨胀:在生产部署之前,应该检查并分析应用程序捆绑包以删除不需要插件或模块。...这使代码对于其他开发人员来说更具可读性和理解性。 一致格式和命名约定:整个代码库遵循一致格式和命名约定。这包括缩进、间距、变量和组件命名以及文件命名约定。

    38410

    React脚手架

    react项目的脚手架库: create-react-app,项目的整体技术架构为: react + webpack + es6 + eslint,使用脚手架开发项目的特点: 模块化, 组件化, 工程化...创建项目并启动第一步,全局安装:npm i -g create-react-app第二步,切换到想创项目的目录,使用命令:create-react-app project_name第三步,进入项目文件夹...(需要web-vitals库支持)setupTests.js---- 组件单元测试文件(需要jest-dom库支持)注意事项1.动态初始化列表,如何确定将数据放在哪个组件state?...——某个组件使用放在其自身state——某些组件使用放在他们共同父组件state(状态提升)2.父子之间通信:【父组件】给【子组件】传递数据:通过props传递【子组件】给【父组件】传递数据...:通过props传递,要求父提前给子传递一个函数注意defaultChecked 和 checked区别,类似的还有:defaultValue 和 value状态在哪里,操作状态方法就在哪里react

    42220

    React-Native私服热更新集成与使用

    3.3.3 打包静态资源 执行 react-native bundle 命令可以js代码打包成jsbundle文件,也可将静态文件如图片打包到文件。...通常,只想使用 CodePush 来解析发布版本 JS 包位置,因此,我们建议使用 DEBUG 预处理器宏使用打包服务器和 CodePush 之间动态切换,具体取决于您是否调试与否。...如果需要动态使用不同部署,还可以使用 Code-Push options JS代码覆盖部署密钥 方法二:多部署测试 为了有效利用与 CodePush 应用程序一起创建 Staging 和 Production...详细步骤,看文档吧 方法三:动态部署分配 如果希望能够执行 A/B 测试,或配置某些用户提前访问到新版本应用程序(灰度测试),那么能够在运行时特定用户动态放置到特定部署中被证明是非常有用。...修改服务器地址 步骤同多部署测试,然后 Info.plist 添加名称为 CodePushServerURL 字段,值设置为各个环境code-push服务器地址(IP:host)。 5.

    7.9K10

    React---使用react脚手架搭建项目

    一、 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库模板项目 包含了所有需要配置(语法检查、jsx编译、devServer...robots.txt -------- 爬虫协议文件 src ---- 源码文件App.css -------- App组件样式 App.js --------- App组件 App.test.js...--- 页面性能分析文件(需要web-vitals库支持) setupTests.js ---- 组件单元测试文件(需要jest-dom库支持) 1.4....——某个组件使用放在其自身state ——某些组件使用放在他们共同父组件state(官方称此操作为:状态提升) 3.关于父子之间通信:...value, checked必须要写onChange方法配合使用 5.状态在哪里,操作状态方法就在哪里 ?

    6.1K21

    使用强大 AirBnb Lottie 让你 React APP 炫酷起来

    你可以把它放在项目根目录下静态文件,也可以把它放在src文件夹下动画文件。 这取决于你,因为我们将从任何文件路径导入JSON数据。...我选择把我JSON文件(称为react-logo.json)放在静态文件夹: 安装 Lottie-Web 完成之后,我们通过引入Lottie -web包来安装Lottie。...一旦安装了lottie-web,我们就可以动画放置在任何JSX元素,方法是给出一个指示,表明我们希望它驻留在某个选择器。 最好方法是使用id属性,因为它应该应用程序元素中使用一次。...我们例子,我们可以给它指定react-logoid值: // src/App.js import React from "react"; export default function App.../lottie_light"; 希望这篇文章能够帮助您启动并运行Lottie,当您在web应用程序寻找一些特别的东西时,可以Lottie作为一个特性添加到React项目中。

    2K20

    create-react-app迁移到Next.js

    本文中,我引导完成React应用程序(Create-React-App: CRA)迁移到Next.js所采取步骤。 这非常简单,只需几个小时即可完成。...循序渐进:CRA转换为Next.js 创建一个新Next.js项目 首先,终端运行此命令以创建新应用程序: $ npx create-next-app 组件放入Next.js项目: Next.js...对所有可重复使用组件使用该组件。 现在,需要将代表实际页面的组件转换为页面。这就是pages文件用途。页面每个文件代表网站上一个页面。接着,页面组件放在此处。...首先,必须为该类型资源添加一个webpack加载器到next.config.js。 对于图片文件,我正在使用next-images。...如您在本文中所见,这使得React应用程序迁移到Next变得非常容易。 希望现在应该至少本地拥有一个正在运行Next.js应用程序。

    6.1K40

    「前端架构」使用React进行应用程序状态管理

    所有应用程序状态都放在一个对象也会导致其他问题,即使没有使用Redux。当一个反应获取一个新值,使用该值所有组件都将更新并必须呈现,即使它是只关心部分数据函数组件。...但我观点是,如果状态逻辑上更为分离,并且位于React更靠近它位置,那么就不会出现这个问题。 这是真正关键,如果使用React构建应用程序,那么应用程序已经安装了状态管理库。...这种方法酷之处在于,我们可以更新状态常用方法所有逻辑放在useCount钩子: function useCount() { const context = React.useContext(CountContext...如何数据导入每个提供程序取决于这些提供程序使用钩子以及如何在应用程序检索数据,但知道从何处开始查找(提供程序)如何工作。...React,这种情况一直都会发生,而且它本身通常不是问题(应该首先集中精力快速进行不必要重新渲染),但是如果这真的是瓶颈,那么以下是一些React上下文中使用state解决性能问题方法: 将你状态划分为不同逻辑部分

    2.9K30

    React】1413- 11 个需要避免 React 错误用法

    随着 React 越来越受欢迎,React 开发者也越来越多,开发过程也遇到各种各样问题。...本文我结合自己实际工作经验,总结 11 个 React 开发中常见一些错误,帮助您避免一些错误发生。...如果刚开始使用 React,那建议这篇文章你要好好看一下,如果已经使用React 开发项目,也建议您能查缺补漏一下。... state 值直接绑定到 input 标签 value 属性 问题描述 当我们直接 state值作为参数绑定到 input标签 value属性上,我们会发现,无论我们输入框输入什么内容,输入框内容都不会发生变化...错误使用布尔运算符 问题描述 JSX/TSX 语法,我们经常通过布尔值来控制渲染元素,很多情况我们会使用 &&运算符来处理这种逻辑: const count = 0; const Comp =

    1.6K20

    React App 性能优化总结

    它会带来很多好处,例如: 零副作用 不可变数据对象更易于创建,测试,和使用; 利于解耦; 更加利于追踪变化; React 环境,我们使用 Component 概念来维护组件内部状态,对状态更改可以导致组建重新渲染...专业提示: 所有使用 React.PureComponent 子组件,也应该是纯组件或函数组件。 3.生成多个块文件 Multiple Chunk Files 应用程序始终以一些组件开始。...它不会公开源代码,文件路径等等。 5.依赖优化 考虑优化程序包大小时候,检查依赖项实际有多少代码被使用了,会很有价值。例如,如果使用 Moment.js会包含本地化文件多语言支持。...这是因为构造函数仅在EditPanel 组件首次创建时被调用。 引用React文档: 避免 props 值复制给 state!...DOM 元素上传递 Props 应该避免属性传播到 DOM 元素,因为它会添加未知 HTML 属性,这是不必要,也是一种不好做法。

    7.7K20

    『Ant Design』主题定制

    在上一篇文章中介绍使用时,我们使用 Button 与 Switch 默认主色调都是蓝色,但是企业开发,自己公司项目,往往都有自己主题色,这时候我们就需要对『Ant Design』主题进行定制...在哪里可以找到这个文件呢,就是项目依赖文件夹 node_modules ,然后找到 antd 文件夹,然后找到 dist 文件夹,然后找到 antd.less 文件,这个就是 Ant Design 样式文件...菜单,刚好我们项目是通过这种方式创建,在这个菜单告诉我们有一个高级配置: 高级配置中介绍到对 create-react-app 默认配置进行自定义,这里我们使用 craco,那么 craco...说了这么多,我们就来实战一下(创建项目可以利用上一节文章项目来测试),首先我们需要安装 craco,然后项目根目录创建一个 craco.config.js 文件,然后在这个文件中进行配置,这里我主题色改为绿色...很显然 Ant Design 5.x 版本主题定制更加灵活,更加强大,更加推荐使用 六、题外话 如果觉得本文对您有所帮助,欢迎点赞、收藏或分享,支持是我创作最大动力!

    50050
    领券