首页
学习
活动
专区
工具
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 技术,这将使您免受许多代码行的影响,并隔离错误。...这非常重要,因为随着应用程序的增长,实施测试以避免问题将变得非常重要。测试可以巩固代码,并确保您的功能和逻辑按预期工作。

1.1K10

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

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

4.2K31
  • 你不知道的 React 最佳实践

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

    3.3K10

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

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

    74630

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

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

    1.2K10

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

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

    6.2K41

    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 捆绑包膨胀:在生产部署之前,您应该检查并分析您的应用程序捆绑包以删除不需要的插件或模块。...这使您的代码对于其他开发人员来说更具可读性和理解性。 一致的格式和命名约定:在整个代码库中遵循一致的格式和命名约定。这包括缩进、间距、变量和组件的命名以及文件命名约定。

    51510

    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

    42520

    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.

    8.1K10

    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.2K21

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

    你可以把它放在项目根目录下的静态文件夹中,也可以把它放在src文件夹下的动画文件夹中。 这取决于你,因为我们将从任何文件路径导入JSON数据。...我选择把我的JSON文件(称为react-logo.json)放在我的静态文件夹: 安装 Lottie-Web 完成之后,我们将通过引入Lottie -web包来安装Lottie。...一旦安装了lottie-web,我们就可以将动画放置在任何JSX元素中,方法是给出一个指示,表明我们希望它驻留在某个选择器中。 最好的方法是使用id属性,因为它应该只在应用程序的元素中使用一次。...在我们的例子中,我们可以给它指定react-logo的id值: // 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 版本主题定制更加灵活,更加强大,更加推荐使用 六、题外话 如果您觉得本文对您有所帮助,欢迎点赞、收藏或分享,您的支持是我创作的最大动力!

    58550
    领券