如何测试react组件的数组长度？
要测试React组件的数组长度，可以使用以下步骤：
- 创建一个测试用例，确保你的React组件已经正确渲染。
- 在测试用例中，模拟一个包含不同长度的数组作为组件的props。
- 渲染组件并获取组件实例。
- 使用断言库（如Jest或Enzyme）来断言组件渲染的结果是否符合预期。
- 使用断言来验证组件内部的数组长度是否正确。
以下是一个示例测试用例：
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should render correctly with different array lengths', () => {
const array1 = [1, 2, 3];
const array2 = [1, 2, 3, 4, 5];
const array3 = [];
const wrapper1 = shallow(<MyComponent array={array1} />);
expect(wrapper1.find('li')).toHaveLength(array1.length);
const wrapper2 = shallow(<MyComponent array={array2} />);
expect(wrapper2.find('li')).toHaveLength(array2.length);
const wrapper3 = shallow(<MyComponent array={array3} />);
expect(wrapper3.find('li')).toHaveLength(array3.length);
});
});在上面的示例中，我们使用了Enzyme来浅渲染（shallow render）组件，并使用find方法来查找组件中的li元素。然后，我们使用toHaveLength断言来验证数组的长度是否与预期相符。
请注意，这只是一个简单的示例，实际的测试可能需要更多的断言和边缘情况的处理。此外，根据具体的需求，你可能需要使用其他测试工具或库来进行更复杂的测试。
相关·内容
2回答
假设我有以下组件：
import React from 'react'
import AppBar from 'material-ui/lib/app-bar'
class NavBar extends React.Component {
render () {
return (
<div>
<AppBar
title='My NavBar Title'
/>
</div>
)
}
}
export defa
浏览 6提问于2016-02-10得票数 5
回答已采纳
我在试着掌握测试。从概念上讲，我很难确定应该测试什么。
这个Jest /酶测试对这个反应组分是否足够？
是不是太多了？
我是否应该实施更好的实践？
这里是我的组件.
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {AverageText} from './index';
const Row = styled.div`
display: flex;
j
浏览 0提问于2018-04-23得票数 4
回答已采纳
2回答
如何循环重复 这是我的代码 这是App.js import React from 'react';
import './App.css';
import Child from './Child/Child';
function App() {
return (
<div className="container">
<div className='row'>
<Child></Child>
</div>
浏览 7提问于2019-12-11得票数 1
回答已采纳
当我单击“特定”按钮重定向到该页时，该页没有显示内容。
当我选中View => Developer => Developer Tools => console时，它会在下面显示错误文本：
Uncaught : items.map不是ShoppingCart.js:6:1的一个函数
在mountMemo (react dom.Development.js:15846:1)
在Object.useMemo (react dom.Development.js:16219:1)
在useMemo (react.development.js:1532:1)
在ShoppingCart
浏览 12提问于2022-10-05得票数 1
回答已采纳
我的反应应用程序有问题。当我试图检索选择器列表时，我无法检索惰性组件中的选择器。
在我的组件中，我的变量"length“只计算类的选择器。她数的是6而不是7。
你能帮我解决我的问题吗？
App.js
import React, { Suspense, lazy } from 'react';
import { Switch, Route } from 'react-router-dom';
import AppFront from './AppFront';
import Mouse from '.
浏览 4提问于2020-10-21得票数 0
回答已采纳
我有一个搜索表单，用户在那里搜索位置。如果用户输入的位置在api (response object)中，那么我想显示Room component object组件。当我键入不在api中的位置时，就不会显示我的NoRoom组件。
search( query='place' ){
let url = "http://localhost:8000/api/v1/rental/?place__startswith="+encodeURIComponent(query);
Request.get(url).then((response) => {
浏览 1提问于2016-04-04得票数 0
回答已采纳
1回答
我有非常新的反应和尝试学习反应概念，同时建立一个基本的时间表网站。这里，我从输入字段获取数据并以状态存储，但是如何将此表单数据呈现给表组件呢？下面是共享代码和文件结构的事件组件，也就是主组件
import React from "react";
import {Container, Row, Table} from "react-bootstrap";
import EventModal from "./EventModalButton";
class EventList extends React.Component{
render(
浏览 9提问于2020-08-29得票数 1
1回答
我有下面这样的组件
QuestionAnsPage.component(parent)
export interface FieldsDatatype {
id: string | number;
attributeId: string | number,
mainQuestionFlg?: boolean;
mainQuestionId: number | string,
question: string;
**values: Array<number | string>;**
fieldType: number;
mandatory: boole
浏览 7提问于2020-09-17得票数 1
1回答
无法传递jest快照匹配
、、、
我已经玩了几天了，但是没有一个简单的“.toMatchSnapshot”可以通过。我显然不明白这是怎么回事。我应该更改代码或测试的设置吗？
守则：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListGroup, ListGroupItem } from 'react-bootstrap';
import TodoItem from './TodoItem';
import TodoAPI fro
浏览 2提问于2017-12-21得票数 1
回答已采纳
3回答
我有一个react组件，希望使用Dropbox api填充图像。api部分工作正常，但是组件在数据到达之前呈现&因此数组是空的。我如何延迟组件的渲染，直到它有了所需的数据？
var fileList = [];
var images = [];
var imageSource = [];
class Foo extends React.Component {
render(){
dbx.filesListFolder({path: ''})
.then(function(response) {
fileList=response.entries;
浏览 4提问于2017-07-05得票数 26
2回答
单选按钮反应矩阵
、、
我试着解决这个js反应问题，然后被问题2-4困住了。问题2:我不知道如何检查每一行的本地状态，以检查重复的等级选择问题3:是否需要传递给组件的道具来检查是否唯一？问题4:我如何检查所有行都有一个选择排序和唯一的行？
以下是问题：
将“完成”类添加到行中将突出显示为绿色。对具有选定等级的行提供此视觉反馈。
将“错误”类添加到行将突出显示为红色。对已选择重复等级的行提供此视觉反馈。
在submit按钮附近有一个显示错误消息的地方。当用户在多行上选择相同的等级时，请显示此错误消息：Ranks must be unique。
默认情况下，“提交”按钮被禁用。当所
浏览 2提问于2020-10-23得票数 2
3回答
我正在学习使用ReactTestUtils库测试无状态组件。这是我的简单组件：
import React from 'react';
const Greeter = ({name,place}) => (
<h1>Hello,{name}. Welcome to the {place}.</h1>
);
export default Greeter;
这是我的测试规范，为了使renderIntoDocument正常工作，我按照建议的将Greeter组件封装在div中。
import {expect} from 'chai';
浏览 0提问于2016-04-17得票数 12
回答已采纳
我刚开始使用react/redux，并试图弄清楚store/state。我构建了一个组件，它成功地接收数据，然后将其传递给reducer。这是我的组件：
'use strict';
var React = require('react');
var PropTypes = React.PropTypes;
import axios from 'axios';
import store from '../../store';
import {getDataSuccess, getDataFail} from '../..
浏览 0提问于2016-10-14得票数 0
测试组件中的console.log('Render test')运行两次。
没有使用测试状态，我只是举个例子。Test组件不依赖于测试状态，但它仍然呈现两次。为什么？
index.js：
import React from "react";
import ReactDOM from "react-dom";
import AppTest from "./AppTest";
ReactDOM.render(<><AppTest /></>, document.getElementById(
浏览 5提问于2022-03-29得票数 0
回答已采纳
1回答
反应异步钩子如何做它
、、、
这是我的反应元件。
const DashboardContext = React.createContext()
function DashboardStateProvider({ children }) {
const wallet = useWallet()
const Provider = DashboardContext.Provider
if (wallet.account)
return (
<WithSubscription Provider={Provider} connectedAccount={wallet.account}>
浏览 1提问于2021-03-17得票数 0
我有一个包含两个组件的场景：
应用程序
人民
我想测试人们是否在应用程序中被渲染了10次。所以，我试着用Jest来测试它。到目前为止，我在我的src/App.test.js上做了这个
import React, { Component } from "react";
import People from "./components/People";
import App from './App';
test('Total people = 10', () => {
expect(App).find(
浏览 0提问于2020-10-03得票数 1
回答已采纳
这是App组件：
import React, { Component } from 'react';
import { getMovies } from './Files/FakeMovieAPI';
import ItemsNumbers from './Pagination/ItemsNumber';
import Table from './Pagination/Table';
class App extends Component {
state = {
movies: getMovies()
}
r
浏览 5提问于2021-07-04得票数 0
回答已采纳
我开发谷歌signIn的反应。学习如何实现signIn和学习任何reactjs的概念。
我得到\\//错误：
import {useState, useCallback} from 'react'
export const useGLogIn = props => {
const [isLoggedIn, setLogIn] = useState(false)
const login = useCallback(async ({
onSuccess, onFailure, onFinish
}) => {
console.log(on
浏览 5提问于2020-05-13得票数 0
回答已采纳
3回答
我试图更新我的组件的状态，但它不起作用。我有主页容器组件=>嵌套Navbar容器组件=>嵌套NavItem UI组件。同样在主页上，我有AddNavItem容器组件，它应该将item添加到Navbar。看起来是这样的：
Main
|
|--NavBar
| |
| |--NavItem
|
|--AddNavItem
这是我的主页代码：
import React, { Component } from 'react';
import Navbar from '../nav/Navbar'
import AddNavItem from '
浏览 1提问于2018-09-21得票数 0
回答已采纳
所以我正在通过Udemy学习react，老师编写了这个代码来动态地呈现使用状态的汉堡配料的内容。基本上，他是将state对象转换为一个数组，并使用它来呈现内容。
import React from "react";
import classes from "./Burger.css";
import BurgerIngredient from "./BurgerIngredients/BurgerIngr";
const burger = (props) => {
const transformedIngr = Object.keys
浏览 3提问于2020-06-12得票数 1
回答已采纳
2回答
我是react的新手，正在尝试对react组件中的以下代码进行单元测试
import React,{Component} from 'react';
const styleSheet = document.styleSheets[0];
const keyframes =
`@-webkit-keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.6;
}
50% {
transform: scale(1);
opacity: 1;
浏览 2提问于2017-10-25得票数 1
1回答
我正在使用反应-本机倒计时-圆圈-小吃提供的例子。有了它，我想有两个定时器在一个，或一个接一个在一个无限的序列。
我的意思是让第一个计时器计数(当它完成)，然后第二个计时器(不同的时间/颜色)，然后第一个再次无限期地切换。
import * as React from 'react';
import { Text, View, StyleSheet, Animated, Button } from 'react-native';
import Constants from 'expo-constants';
import { CountdownC
浏览 1提问于2021-09-07得票数 0
回答已采纳
我在JavaScript和ReactJS方面还是个初学者。我正在做一个项目来提高我的知识。 我正在呈现一个列表，用户可以在其中按星号过滤结果，如下图所示： ? 我创建这个列表的方式一点也不聪明： import React from "react";
import "./styles.css";
import Checkbox from "@material-ui/core/Checkbox";
import StarBorderIcon from "@material-ui/icons/StarBorder";
im
浏览 32提问于2020-11-08得票数 0
回答已采纳
1回答
概述：
示例布局：
A B C D E F
G H I J
我有一个项目格(A，B，C，D，E，F)。当一个项目被点击(C)时，下面会出现一个子项目列表(G，H，I，J)。为了在选项卡中访问这个选项，一旦单击了一个项，焦点就移到子项列表中。然而，一旦所有这些项目都通过，我想重点转移到下一个主要项目(D)。
问题：
我正在添加参考到A，B，C，D，E和F，但我似乎不能访问我的网格中的裁判，以更新焦点。
//项目
constructor(props) {
super(props);
this.ref = React.createRef();
}
getItemRef() {
浏览 0提问于2019-02-20得票数 0
我似乎无法获得对reactjs登录组件的测试。我只使用反应测试库而不是酶。
我想测试三件事：
，即单击signIn一次，axios调用使用模拟的ajax ，可以使用useState设置值，并检查在成功登录后呈现的页面具有文本的设置。
上述任何一项都不起作用。我一直在研究不同的问题，例如这个expect(signIn).toHaveBeenCalledTimes(1)返回：
Expected number of calls: 1
Received number of calls: 0
其他情况下，它会引发错误:无法找到给定节点的“窗口”对象。用于此：
const button =
浏览 5提问于2021-08-30得票数 0
1回答
我从API中获取响应对象，希望将响应对象作为支柱传递到App.js的子组件上，并在Tags.js文件中使用它。然而，它只工作了一次，当我刷新它时，它会给我一个错误，说明props.response.names.length是未定义的。我试着使用useEffect函数来尝试并更新它，但是它没有工作。我很感谢你的帮助。
我的App.js文件(在运行"npx创建-反应-应用程序My“时仍有一些残留)：
import './App.css';
import Tags from './Tags.js';
import React, { useState, useE
浏览 1提问于2022-06-12得票数 0
回答已采纳
2回答
我想用摩卡，查伊和酶做单元测试。我已经做了一些单元测试，它们运行良好。
但是，连接到阿波罗商店的组件不能工作.我有个错误。
这是一个测试，其组件连接到阿波罗存储
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import ReviewList from '../../src/components/tibco/review-list/
浏览 3提问于2016-12-12得票数 1
回答已采纳
1回答
我正在试图映射从父组件获得的数组，但是问题是，即使我将数据分配给state，初始的load状态上也是空的，这就导致了一个空数组。我需要这个状态下的数组，因为我将在我的项目中实现排序功能，而且每当用户单击相应的单元格时，我都想更改userData。下面是我的代码：
import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import Moment from 'react-moment';
const UserTable = ({ repo
浏览 2提问于2020-05-18得票数 0
回答已采纳
我无法找到/打印由ReactJS setState设置的对象数组的长度。我的component.js如下所示
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
error: false,
items: []
};
}
compo
浏览 5提问于2019-09-25得票数 3
回答已采纳
我正在尝试用编写一个简单的textarea字符计数器小部件，以学习如何使用它，但现在我确定了如何通过触发textarea onChange事件来设置值。
我是这样写这个应用程序的：
/**
* @jsx React.DOM
*/
var EditorWidget = React.createClass({
render : function() {
return (
<div className="editor-widget">
<h4 className="titl
浏览 1提问于2014-07-22得票数 7
3回答
我是新手，当我创建一个项目时，我遇到了一个非常奇怪的事件，我的代码。它具有setState的异步特性，它不允许我按照我希望的那样在页面上呈现数据。我正在尝试将我已经在数据库中的文件显示到我的网页上。但是，由于状态是在一段时间后设置的，因此我无法使用map函数将文件呈现到屏幕上，因为当调用它时它是未定义的。
我实现了一个get方法，以便获得我想要显示的文件的json响应。但是当我挂载我的组件和文件的setstate时，它显示出它没有任何价值，我知道它是异步的，但是我不知道如何处理它，这样我就可以使用map在网页上显示。
我的代码如下：
import React, {Component} from
浏览 3提问于2020-07-30得票数 1
回答已采纳
我正在编写一个简单的Jest测试，以验证我的组件呈现的结果。我看到React的TestUtils具有通过类或标记来查找呈现的组件的函数，而不是通过它们的ID属性。有一个函数，但是文档没有解释回调应该期望实现什么。
我猜想回调将收到某种类型的元素对象，这不是普通的DOM元素或普通的React组件。究竟是什么传递给findAllInRenderedTree的回调，我应该如何获得它的属性，或者至少是它的ID？
我只想console.log回调的论点，但是我很难让控制台在Jest测试中工作。
浏览 1提问于2015-06-23得票数 10
回答已采纳
1回答
我在这里遵循教程：http://adazzle.github.io/react-data-grid/docs/examples/column-sorting并尝试实现react-data-grid，因为它为我提供了进行排序、特定单元格的树型视图等功能。但我收到了如下错误： 不变冲突:钩子只能在函数组件的主体内调用。 import React from "react";
import { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid
浏览 21提问于2019-04-20得票数 0
我需要显示来自webapi的JSON数据。我需要用反应中的数据填充下拉列表。在填写数据时，我正在处理这个问题。
console.log(this.state.Templatelist)返回数据。这些数据来自api。
{"Template_ID":11，"TemplateName":"All"}，{"Template_ID":21，"TemplateName":"Test"}
请找到我的密码：
import React from "react";
export class test e
浏览 5提问于2022-07-18得票数 0
1回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
你好，我有一个关于componentDidMount内部fetch调用的问题。下面是一个示例代码：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(async () => {
const result = await axios(
'https://hn.algo
浏览 50提问于2020-02-24得票数 0
回答已采纳
StackOverflow上的第一次定时器！我正试图模仿我的一个投资组合项目的终端界面。我所设想的终端的方式是，每个终端框都有一个带有几个键/值对的状态对象。理想情况下，当有人将文本输入到终端框输入表单中时，输入将被禁用，并在屏幕上呈现一个新的终端框，其动态响应基于保存在状态中的userInput文本。我被困在那里：
一旦userInput状态被更新，我如何获得一个新的终端框来呈现在屏幕上的前一个框下？
在呈现之前，如何将新呈现的终端框的初始状态设置为默认状态，除非“输出”将被重值到我设置的适当响应？
如何访问前一个终端框中的状态，以便“读取”存储在其中的userInput，以便确
浏览 4提问于2020-08-07得票数 2
我有这样的代码：
# app/assets/javascripts/components/records.js.coffee
@Records = React.createClass
...
render: ->
React.DOM.div
className: 'records'
React.DOM.h2
className: 'title'
'Records'
React.DOM.table
cl
浏览 2提问于2015-09-27得票数 0
回答已采纳
1回答
我正尝试在我的应用程序中编写第一个测试，但遇到如下错误 ● Login component tests › should have 3 input fields !
expect(received).toHaveLength(expected)
Expected length: 3
Received length: 0
Received object: {}
13 |
14 | it('should have 3 input fields !', ()=> {
> 15 | expect(wrapper.f
浏览 48提问于2020-01-28得票数 1
回答已采纳
1回答
使用react，我需要将道具数据传递给组件，唯一的问题是这些数据来自两个不同的数组。
如何通过只创建一个组件来传递它？
如果我这样做，映射两个数组，我会得到两个组件，它必须只有一个：
const Field2 = (props) => {
return (
<div className={"field2"}>
{props.thumbnails.map(a =>
<Field2Content label={a.label}
/>
浏览 0提问于2018-04-20得票数 0
回答已采纳
我正在使用Jest测试我的连接组件。组件的外观如下：
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
class MyComponent extends Component {
constructor(){
super();
this.onButtonClick = this.onButtonClick.bind(this);
}
onButtonClick(id) {
dispatch(ac
浏览 2提问于2016-10-05得票数 2
回答已采纳
3回答
我正在尝试将数据呈现到一个数组中，以便可以在react原生的图表中查看数据。
似乎有一个关于最大值的问题
import React, { Component } from 'react';
import { View,Button,Text } from 'react-native';
import { LineChart, XAxis, Grid } from 'react-native-svg-charts'
import n_data from './data'
class MyComponent extends Com
浏览 1提问于2021-05-30得票数 0
1回答
我刚刚开始为我的react应用程序探索一个单元测试框架。我将我的选择锁定在@testing-library/react而不是Enzyme，这是React推荐的，并且有助于编写更健壮的测试。为了完整起见，我还计划使用Jest。
但在我开始React Testing Library之前，我只想问几个问题。有人能帮忙吗？
例如,
有一个基于用户输入更新Redux存储的Editor组件，有另一个组件Preview直接从存储中读取值，还有第三个组件Container，它包含上述两个组件传递一些道具。<code>H 213</code><code>G 214</c
浏览 1提问于2020-05-27得票数 3
回答已采纳
2回答
我的代码是： import React, { useEffect, useState } from "react";
import styles from "./Cards.module.css";
import { CardDeck, Card } from "react-bootstrap";
const Cards = ({ animeArray }) => {
const [aanimeArray, setAnimeArray] = useState([]);
useEffect(() => {
setAn
浏览 55提问于2020-09-18得票数 0
我是新来的。当我开始对大多数的文档做出反应时，react和react视频资源说，使用功能组件而不是基于类的组件。他们还说，如果您想要管理状态并使用生命周期，请使用钩子。
我想知道功能性成分在反应中的优势是什么？
以及为什么react在创建react中的组件时建议基于功能的方法？
谁能回答这个问题，或者给我一些消息来源来理解这个问题？
浏览 0提问于2019-08-20得票数 6
回答已采纳
菜鸟问题...
我已经动态创建了功能组件实例，如何在一个特定实例上更改状态？说第三个，把“老鼠”改成“老鼠”？如果我用AS3这样做，我会把实例放在一个数组中，然后能够从数组索引中对它们进行寻址，那么用React是如何做到的呢？
const display_set = ["cat","dog","rat","bat"];
function drawDisplay() {
return (
<div className="Row-display">
{display_s
浏览 0提问于2021-07-15得票数 0
2回答
我有一个包含图像的对象数组：
import React, { Fragment } from "react"
import { useStaticQuery, graphql } from "gatsby"
import Button from "@material-ui/core/Button"
import Card from "@material-ui/core/Card"
import CardActions from "@material-ui/core/CardActions"
import Card
浏览 4提问于2021-08-08得票数 2
回答已采纳
我在react中是新手，并且尝试学习如何使用map函数处理组件，但是最近我遇到了这个错误，我不知道它是什么，也不知道如何解决它。
错误:元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但要获得: object。检查App的呈现方法。
这是我的代码**
Mapfun.jsx
**
import React from 'react';
import Card from './Cards';
import Sdata from './Sdata';
const Mapfun=Sdata.map((val)
浏览 0提问于2021-09-03得票数 1
回答已采纳
1回答
这是我的Results.js
这是我的Thumbnail.js
`import React from "react";
const Thumbnail = ({ result }) => {
return (
<div>
<h1>Thumbnail</h1>
</div>
);
};
export default Thumbnail;`
这在我的index.js里
<Results results={results} />
当我想在Results.js中调用缩略
浏览 2提问于2022-08-27得票数 0
1回答
这是我第一次开发react应用程序。 我想在一个表格中显示5个按钮。我采用的第一种方法是用Table.js对其进行硬编码 Table.js
<Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
Reprocess
</Button>{" "}
<Button hidden={controlButton} onClick={() => reprocessConfirmation(
浏览 20提问于2019-05-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
