React条件呈现组件测试用例jest
是用于测试React组件中条件呈现的一种测试框架。它可以帮助开发人员编写和运行测试，以确保组件在不同条件下的渲染和行为是正确的。
测试用例通常包括以下几个方面：
- 测试条件呈现：测试组件在不同条件下的渲染是否正确。可以通过模拟不同的props或状态来触发不同的条件，并断言组件的渲染结果是否符合预期。
- 测试事件处理：测试组件中的事件处理函数是否正确地响应用户的操作。可以模拟用户的操作，如点击按钮或输入文本，然后断言组件的状态或渲染结果是否符合预期。
- 测试组件交互：测试组件与其他组件或外部依赖的交互是否正确。可以使用模拟的组件或依赖来验证组件的交互行为是否符合预期。
- 测试边界条件：测试组件在边界条件下的行为是否正确。例如，测试组件在接收无效或缺失的props时是否能够正确地处理，并给出相应的错误提示。
以下是一个示例测试用例：
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('renders correctly when condition is true', () => {
const { getByText } = render(<MyComponent condition={true} />);
expect(getByText('Condition is true')).toBeInTheDocument();
});
it('renders correctly when condition is false', () => {
const { getByText } = render(<MyComponent condition={false} />);
expect(getByText('Condition is false')).toBeInTheDocument();
});
it('handles button click correctly', () => {
const { getByText } = render(<MyComponent condition={true} />);
const button = getByText('Click me');
fireEvent.click(button);
expect(getByText('Button clicked')).toBeInTheDocument();
});
});在上面的示例中，我们使用render函数将MyComponent渲染到测试环境中，并通过getByText函数获取组件中的文本内容进行断言。通过模拟不同的条件和用户操作，我们可以测试组件在不同情况下的渲染和行为是否正确。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
- 腾讯云安全加速（SA）：https://cloud.tencent.com/product/sa
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
以上是关于React条件呈现组件测试用例jest的完善且全面的答案。
相关·内容
1回答
我正在使用Jest/Enzyme测试我的React组件。
在一些测试用例中，测试会失败，但会出现一些异常。什么是合理的/标准的方法来处理Jest/酶中的错误，而不是破坏测试用例？
例如，如果“网格”组件没有以parameter.However的形式获得任何数据，则应通过以下情况，它会失败，并抛出网格组件之外的异常。
test('Grid does not render without data',()=>{
const wrapper=shallow(<Grid/>);
expect(wrapper.length.toBe(0));
})
浏览 7提问于2018-12-13得票数 3
回答已采纳
我正在尝试用Jest设置一个非常基本的测试，用于测试App.js是否正确呈现。我得到了错误
Cannot find module './App' from 'App.test.js'
However, Jest was able to find:
'./App.js'
'./App.test.js'
但是，如果我尝试编写import App from "./App.js";而不是... from "./App";，我会得到
Cannot find modul
浏览 0提问于2019-07-15得票数 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
我使用react和。在jest中测试组件时，我发现我不能访问状态值，也不能模拟它。
有一组代码正在寻找状态中的不同值。由于state是不可访问的，所以我无法涵盖完整的代码覆盖率。
请帮助我为下面的代码编写一个测试用例。
const MyComponent = props => {
const [counterSecond, setCounterSecond] = React.useState(8);
const [counterFirst, setCounterFirst] = React.useState(0);
const handleIncrement =
浏览 1提问于2019-08-26得票数 1
回答已采纳
我有一个React组件，它包含在高阶组件withRouter中，如下所示：
module.exports = withRouter(ManageProfilePage);
我的路线如下：
<Route path="/" component={AdrApp}>
<IndexRoute component={Login}/>
<Route component={CheckLoginStatus}>
<Route path="manage-profiles/:profileId" compone
浏览 7提问于2017-05-26得票数 35
回答已采纳
1回答
我有一个登录组件如下所示，我正在为这个组件编写一些测试用例。当我试图运行测试时，我得到了以下错误：
测试
import renderer from 'react-test-renderer'
import Login from '../Login'
let props, wrapper
beforeEach(() => {
props = {
loginAttempt: jest.fn(),
recoverAttempt: jest.fn(),
reset: jest.fn()
}
wrapper = shallow
浏览 0提问于2018-12-21得票数 13
1回答
我正在检查Jest报告，我有一堆图标显示在这份报告中没有经过测试。如何使用Jest正确地测试这个ArrowDownIcon组件中图标的呈现？在文档中找不到任何相关的内容，只有一些文本的测试按钮。
import React from 'react';
import {Icon} from '@ui-kitten/components';
const ArrowDownIcon = (
props: any = {},
styles: any = {},
fill: string = '#000',
) => <Icon
浏览 3提问于2022-10-21得票数 0
回答已采纳
2回答
我正在使用React中的功能组件，我需要为功能组件中的方法编写单元测试用例。
import React from 'react';
function print(){
console.log('hello');
}
function Welcome(props){
return <h1>{props.name}</h1>;
}
export default Welcome;
在jest和酶中：
test (method print , ()=> {
const container = shallo
浏览 19提问于2020-06-02得票数 0
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'e
浏览 42提问于2019-01-02得票数 0
可选链接在尝试将tsConfig目标设置为ESNext、ES2021或ES2020时正在创建问题。但是，当我将目标设置为ES2019时，效果很好。不知道我做错了什么。
下面是我的jest配置的相似之处：
{
...,
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
},
globals: {
'ts-jest': {
tsConfig: {
target: 'ES2019',
浏览 4提问于2021-09-01得票数 1
回答已采纳
1回答
我有一个测试用例，为了返回一个模拟当前值，我需要模拟useRef。我尝试了jest.mock，但是它返回一个HTMLDivElement。
代码：
const ref = useRef<HTMLDivElement | null>(null);
测试：
jest.mock('react', () => {
const originReact = jest.requireActual('react');
return {
...originReact,
useRef: je
浏览 3提问于2021-02-23得票数 3
我正在使用react- testing -library测试我的组件，并且测试工作正常。我就是摆脱不了这个警告，fireEvent应该被包装在开箱即用的行为中，但我试图再次包装它，它没有帮助。 这是我的测试用例。 it.only("should start file upload if file is added to the field", async () => {
jest.useFakeTimers();
const { getByTestId } = wrapper;
const file = new File(["filefi
浏览 178提问于2019-03-15得票数 16
我在用Jest /酶编写的测试用例中遇到了一些问题。我有一个React / Redux组件，并且试图编写一个基本的测试，但是得到了以下错误：
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'undefined'.
这是我的密码：
dashboardComponent.js
import '../stylesheets/dashboardCom
浏览 0提问于2018-08-31得票数 6
回答已采纳
1回答
ReactJS测试的玩笑
、、、
我对我的React组件进行了以下测试
var React = require('react/addons');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;
describe('Navigation', function() {
v
浏览 2提问于2016-06-08得票数 0
回答已采纳
在触发Enter事件按钮和测试与事件相关的方法时，我面临问题。我在组件上有两个按钮细化搜索和关闭按钮，因此尝试实现与Enter键相同的相关单击功能。为此，我将调用keyDownHandler方法onKeydown事件并调用相应的方法。
这是我在组件中的方法
const keyDownHandler = event = {
const targetValue = event.target.id
if(event.key === 'Enter' || event.keyCode=== 13){
if(targetvalue === 'someid1'
浏览 15提问于2022-07-15得票数 0
1回答
如何使用实际模块而不是模拟
、、、、
我有下面的Jest配置
jest: {
configure: {
testEnvironment: 'jsdom',
preset: 'ts-jest',
transform: {...},
moduleNameMapper: {
antd: '<rootDir>/__mocks__/antd/index.tsx'
},
testMatch: ['<rootDir>/src/**/*.test.(ts|tsx)$&#
浏览 2提问于2022-08-08得票数 3
2回答
我有一个React类，我们称它为A。我正在对它运行一个jest测试，但我一直收到
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
在我正在做的React类中：export class A extends Component ..
在我正在执行的jest测试文件中：import { A } from './A.js'
当我运
浏览 0提问于2019-04-04得票数 0
我试图使用jest-cli测试一个react组件是否包含它的输出中的另一个组件。我想不出该怎么做。
以下是我的组件：
DesignerPage组件
[...]
var TopBar = require('../components/layout/TopBar.js');
var DesignerPage = React.createClass({
getInitialState: function() {
var state = {
};
return state;
},
render: function() {
return (
浏览 4提问于2014-10-10得票数 17
我正在尝试使用Jest进行单元测试react-native，并且我在应用程序中成功地使用了@providesModule，但是Jest无法使用这种格式"import Component from "Component“加载模块。”
jest:版本13.2.3 react-native: 0.29.0
错误是：
FAIL js/components/home/__tests__/TestHome.js (0s)
Runtime Error
- Error: Cannot find module 'Time' from 'TimelineItem.j
浏览 6提问于2016-07-22得票数 1
2回答
我已经创建了一个函数，我想为该函数编写一个测试用例。我在该函数中返回HTML内容。
我的函数代码是-
export function executeScenario(handleExecuteScenarioClick: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined, classes: any , buttonTitle:string) {
return <Button id="executescenario" variant="c
浏览 0提问于2020-06-12得票数 2
1回答
我想测试一个基本的组件名TitleHeader，它使用来自本机基础的HStack和VStack。构成部分：
import {Center, HStack, VStack} from 'native-base';
import React from 'react';
import {View, Text} from 'react-native';
import appColors from '../../constants/appColors';
//Icon Imports
import Ionicons from 're
浏览 16提问于2022-02-04得票数 0
这就是组件的排列方式。
class A extends React.Component {
state = {mode: 'create'}
abstract getRows() {
}
abstract getTitle(){
}
}
class B extends A {
getTitle(){
if(this.state.mode === 'create'){ return 'New';}
else {return 'Existing'};
}
浏览 2提问于2022-03-04得票数 0
我试图升级到反应路由器的v6。这个应用程序可以工作，但我似乎无法让测试用例工作。
在我们拿这个包装开玩笑之前：
const render = (ui: React.FC, path: string, route: string): RenderResult => {
const history = createMemoryHistory({ initialEntries: [route] });
const queryClient = new QueryClient({
defaultOptions: {
queries: {
浏览 0提问于2021-11-17得票数 5
回答已采纳
我想测试一个在其实现中使用状态的钩子，但是每次我运行测试时都会得到以下错误：
Error: Uncaught [Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.]
钩子很复杂，我找不到哪个部分可能导致问题(另外，在使用npm start运行应用程序时，它在实际情况下工作得非常好)。
我试图编写一个虚拟测试，看看我是否能够找到任何东西，我发现更新状态(我在钩子中做的)触发了错误。
基本上，这是失败的：
import { renderHook } from "
浏览 16提问于2022-08-03得票数 1
回答已采纳
1回答
一个简单的测试用例: testClick.js
import React from 'react'
import { Button } from 'antd'
export default function testClick() {
const onClick = () =>{
console.log("2333")
}
return (
<Button onClick={onClick}>testClick</Button>
)
}
testClick.test.js
impor
浏览 1提问于2022-11-09得票数 -1
回答已采纳
2回答
我有一个使用useEffect的组件，它使用api调用redux操作，称为props.getPostsInit();。
我如何测试这个，现在我得到一个错误，它没有调用getPostsInit道具
● <Dashboard/> › Should execute getPostsInit
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
仪表板
function Dashboard(props: das
浏览 4提问于2020-02-11得票数 1
回答已采纳
我用Jest和酶对我的应用程序进行单元测试。我以前是这样测试的：
const textFieldWrapper= shallow(<TextField label="Standard" />);
expect(textFieldWrapper.find('input').length).toEqual(1);
现在，返回的DOM似乎是：
<ContextConsumer>
[function]
</ContextConsumer>
我再也无法访问输入信息了。
我的问题是，如何使用这个新呈现的DOM?来访问输入值？
pac
浏览 0提问于2018-09-19得票数 2
回答已采纳
1回答
如何确保自定义钩子实际上调用由另一个钩子公开的方法？
比方说，我有一个自定义钩子useName，它在内部利用useState。
import { useState } from 'react'
export const useName = () => {
const [name, setState] = useState()
const setName = (firstName: string, lastName: string) => setState([firstName, lastName].join(' '))
浏览 7提问于2021-12-16得票数 0
我正在为一个react应用程序设置前端单元测试，很多指南都说要同时安装Jest和酶类，但是当阅读Jest和酶类的描述时，我不知道Jest做什么，Jest除了“两者都使用更好”之外，还没有做什么。
如果我只使用Jest进行测试，我会错过什么重要的特性吗？
浏览 1提问于2019-03-28得票数 3
回答已采纳
我已经安装了反应性路由器-domV6 6。当我使用Jest酶运行我非常基本的测试时，我遇到了上述错误：
expect(shallow(<CustomerListTable customers={mockCustomers} />).length).toEqual(1);
我已经看到了这个，但是我已经在做提供的答案了。甚至试着做import { BrowserRouter as Router } from "react-router-dom";。我在这里错过了什么？
index.js
import React, { Suspense } from "react
浏览 4提问于2021-11-19得票数 5
回答已采纳
我正在尝试使用Jest为react类编写测试用例，在material中使用frameworks.My react类使用卡类。我的部分代码是这样的。
<Card>
<CardHeader
avatar = {<div className={classes.imgHolder}><img src='/opt/imgs.png'/></div>}
actions = {<div/>}
title = {<div/>}
/>
<
浏览 0提问于2019-05-13得票数 0
回答已采纳
我有以下的react组件，它有条件地调用ReactDOM.render if root === true以满足flow
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
const root = document.getElementById('root')
if (root !== null) {
ReactDOM.render(<App />, root)
}
问题是，这个测试不再等于tru
浏览 0提问于2018-09-22得票数 3
回答已采纳
2回答
import React from 'react'
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json';
import {ScreensLogin} from './Login'
test('render correctly', () => {
const state = {
email: '',
passwd: '
浏览 0提问于2019-01-20得票数 0
当我将这段代码添加到代码中时，我的Jest测试就会中断：
import 'promise-polyfill/src/polyfill';
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that t
浏览 1提问于2018-12-27得票数 1
1回答
我对编写测试用例非常陌生，我正在尝试用jest，酶/反应测试库来编写测试用例，我无法测试这个组件，.If失败了，有人可以帮助我预先为下面的代码.Thank you编写测试。我已经附上了测试用例，因为well.If发现的错误确实帮助我解决了它。用开玩笑、酶或反应库的测试用例什么都行，我还在学习阶段。
header.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-rou
浏览 27提问于2022-01-07得票数 1
我有一个反应组件，如下所示：
Component1.js
import React from 'react';
import Component2 from './Component2.js';
const Component1 = () => (<div data-test="component1-component"><Component2 /></div>);
Component2.js
import React from 'react';
import { connect } f
浏览 0提问于2019-08-21得票数 2
我是Jest和React的新手，正在为React web项目设置Jest单元测试，当我试图在异步分派上进行单元测试时，我遇到了这个问题。每当出现新的错误(...)时，测试用例就会退出，并在执行该行时失败。(它从运行到jest-jasmine2模块的测试用例开始，在该模块中有一个新的执行错误。然后我直接在我的测试用例中尝试新的错误，它也失败了...)。当npm启动时，不会发生任何错误，但只有当npm测试时，才会发生这种情况。
./__TEST__/action.test.js
import * as actions from '../actions';
import config
浏览 0提问于2017-07-25得票数 5
1回答
有人能帮我写一个使用jest和酶的条件渲染组件的测试用例吗？ {this.state.addingNewContent ?
<AddContent
contentId={this.state.contentId}
added={this.addContentHandler}
meta={option}
closeAddContent={this.closeAddContent}
assignedData={this.state[option.nam
浏览 11提问于2020-12-04得票数 0
回答已采纳
我可能在这里使用的词不对，但我有一个组件，它使用react-icons，特别是字体。
import { FaDog, FaHome, FaFileContract } from "react-icons/fa";
我把它们作为组件传递给一个子组件。
<SidebarBtn label="Home" linkTo="/" icon={<FaHome />}></SidebarBtn>
当我编写Jest单元测试时，我想确保那些响应图标组件被调用并传递到child...but，它似乎不像我想的那样通过。
const
浏览 3提问于2021-12-18得票数 0
1回答
我正在尝试做一个新的反应应用程序和渲染使用我的布局第一方法，没有任何在我的屏幕上。这是我使用的代码->
App.js
import React from "react";
import HomeLayoutHOC from "./HOC/Home.Hoc";
import Temp from "./Component/temp";
function App() {
return (
<>
<HomeLayoutHOC path="/" exact component={Temp}
浏览 8提问于2022-01-26得票数 -2
1回答
我正在尝试测试一个axios调用，该调用发生在页面加载时，使用react测试库。即使在将道具传递到组件中之后，模拟Axios实例似乎也不会触发。我想测试错误和成功的场景。我跟踪了许多样本，但打字本使我的测试更加困难。请帮帮忙
RegistrationConfirm.tsx
export default function RegistrationConfirm(props: any) {
const [statusMessage, setStatusMessage] = useState('Confirming your account ...');
const
浏览 6提问于2020-12-03得票数 0
我有一个React组件，它接受一个数组并在每个节点上迭代，根据数组中找到的类型对HTML元素进行样式化和呈现。
我所有的东西都运行正常，现在我正在尝试用Jest编写一个测试来检查：
组件在接收空数组时不会呈现任何内容组件在收到填充的数组时根据类型呈现适当的元素
对于Jest和测试，我还比较陌生，我不知道如何编写测试来检查适当的元素是否已经呈现。此外，我的null检查测试仍然失败，出现了以下错误消息：
FAIL src/components/RenderTextComponent.spec.js
● <RenderTextComponent /> › renders null
浏览 5提问于2021-03-04得票数 0
回答已采纳
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
1回答
从中，我们知道反应钩子不能在一个条件下调用。我有一个定制的react钩子useRemoteData，我把它放在if(visible) return null语句之后。所以它违反了钩子的规则。
我希望RTL应该抛出无效的钩子调用警告。但事实并非如此。两个测试用例在没有任何警告的情况下通过了。
Eslint给出了正确的警告信息：
React "useRemoteData“是有条件的。在每个组件呈现中，必须以完全相同的顺序调用React。你是不是在早早回来后不小心叫了一个反应钩？
fn.tsx
import React from 'react';
import { u
浏览 6提问于2022-03-10得票数 1
我正在尝试使用jest和酶为react中的容器编写单元测试。我的react代码如下：
AgentForm.js
import {
resetStatusMessage,
formSetError,
formResetError,
createAgent,
updateAgent
} from "../../actions";
componentWillMount = () => {
const {
agents,
match,
push,
resetS
浏览 0提问于2018-01-29得票数 0
我正在尝试测试是否在我的组件的componentDidMount钩子中调用了函数。
我使用React-Native和Jest来测试我的组件。
该组件如下所示：
const tracker = new GoogleAnalyticsTracker('UA-79731-33');
class MyComponent extends Component {
componentDidMount() {
tracker.trackScreenView(this.props.title);
}
}
所以我模拟了一下GoogleAnalyticsTracker
浏览 1提问于2017-02-20得票数 2
1回答
我有一个组件MyCheckbox.js的单元测试覆盖率报告。
如何在onCheckmarkPress()函数中测试MyCheckbox.js？
下面是MyCheckbox.js的实现：
import * as React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
/**
浏览 10提问于2022-10-11得票数 0
回答已采纳
当用户单击按钮时，我试图测试重定向页面(我不想使用jest.mock())。我根据test-react-library文档创建了包装器：
import { FC, ReactElement, ReactNode } from "react";
import { render, RenderOptions } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import userEvent from "@testing-libr
浏览 8提问于2022-06-04得票数 1
回答已采纳
当我在JEST中为React文件编写测试用例时，我得到了这个错误。以下是我的示例代码：
search_basr_test.js
jest.autoMockOff();
global.React = require('react/addons');
jest.setMock('../stores/browser_store.jsx');
beforeEach(function() {
var search_bar = require('../components/search_bar.jsx');
});
var TestUtils = R
浏览 5提问于2015-12-23得票数 11
我正在尝试将单元测试添加到使用类型记录和React编写的应用程序中。为了简单起见，我有一个非常基本的组件。
import React from "react";
import ReactDOM from "react-dom";
type TypeProps = { }
type TypeState = { }
class App extends React.Component<TypeProps, TypeState> {
constructor(props:TypeProps) {
super(props);
浏览 7提问于2022-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
