如何测试react中以react为参数导出函数
在React中，测试一个以React为参数导出的函数可以通过以下步骤进行：
- 安装测试相关的库和工具：首先，确保你的项目中已经安装了测试相关的库和工具，如Jest、React Testing Library等。你可以使用npm或yarn进行安装。
- 创建测试文件：在你的项目中创建一个与被测试文件相对应的测试文件，命名规则为
filename.test.js。例如，如果你要测试的文件名为example.js，则测试文件名为example.test.js。 - 导入所需的依赖：在测试文件中，导入所需的依赖项。通常，你需要导入React、被测试的函数以及测试相关的库和工具。
- 编写测试用例：使用Jest提供的测试函数，编写测试用例。对于以React为参数导出的函数，你可以模拟一个React组件，并调用被测试函数，然后断言其返回值是否符合预期。
- 运行测试：在命令行中运行测试命令，通常是
npm test或yarn test。测试运行完成后，你将看到测试结果和覆盖率报告。
下面是一个示例的测试代码：
// example.js
export function exampleFunction(reactComponent) {
// 函数逻辑
}
// example.test.js
import React from 'react';
import { render } from '@testing-library/react';
import { exampleFunction } from './example';
test('exampleFunction should return the expected value', () => {
// 模拟一个React组件
const TestComponent = () => <div>Test</div>;
// 调用被测试函数
const result = exampleFunction(TestComponent);
// 断言返回值是否符合预期
expect(result).toBe('expected value');
});在这个示例中，我们模拟了一个React组件TestComponent，并将其作为参数传递给exampleFunction。然后，我们断言exampleFunction的返回值是否符合预期。
对于React中以React为参数导出的函数的测试，你可以根据具体的业务逻辑和需求编写更多的测试用例。同时，你还可以使用React Testing Library提供的工具和方法来进一步增强测试的可靠性和覆盖范围。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 物联网套件：https://cloud.tencent.com/product/iotexplorer
- 移动推送（信鸽）：https://cloud.tencent.com/product/tpns
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
我正在使用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
回答已采纳
我想测试一下，当模拟按钮单击时，是否调用了从mapDispatchToProps传递的函数。
如何测试从mapDispatchToProps传入的函数是否被调用？
我试图通过props传递一个模拟的函数，但它不起作用。任何帮助都将不胜感激。
下面是我的伪类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
浏览 10提问于2018-08-29得票数 8
1回答
大多数组件如下所示：
import React, { Component } from "react";
import { withTranslation } from "react-i18next";
class XYZ extends Component {
constructor(props) {
super(props);
this.state = {
};
}
.....
.....
render() {
const { t } = this.props;
return (
浏览 4提问于2020-01-16得票数 0
回答已采纳
1回答
如何从react类中同时导出类和函数。下面是我的类，我正在尝试导出onKeyHandler来对它进行单元测试。我试着在onKeyHandler之前添加export，但是我的林特不喜欢这样。我该如何将其中一个导出为默认值，将另一个导出为函数进行测试。
import React, { Component } from 'react';
class MyComponent extends Component {
onKeyHandler = ({ target, keyCode }) => {
};
render() {
return (
浏览 3提问于2018-11-07得票数 1
下面的代码运行良好：
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
export default class App extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('SampleApp',
浏览 0提问于2018-11-14得票数 1
当我运行我的react应用程序时，控制台说
Failed to compile.
./src/components/login/index.js
Attempted import error: 'Login' is not exported from './login'.
以下是文件夹结构：
├── index.js
├── login.js
└── register.js
index.js文件：
export { Login } from "./login";
export { Register } from "./register&
浏览 5提问于2020-05-01得票数 3
回答已采纳
2回答
我有这样一个连接的容器：
import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { autobind } from 'core-decorators';
const propTypes = {
data: PropTypes.object,
userData
浏览 1提问于2018-01-20得票数 3
回答已采纳
我正在使用Typescript/React创建.tsx组件。我想对React组件内部的方法进行一些单元测试。可以这样说：
export default class SomeComponent extends React.Component<undefined, SomeComponentState> {
someMethod = (string: someInput) => {
return someInput + someInput;
}
render () .. // etc
}
在SomeComponent.test.tsx文件
浏览 0提问于2017-10-17得票数 2
我该如何在helpers.js文件中访问我的redux-store (基本上是一个充满了帮助派生/操作依赖于该STORE的特定数据的函数的文件)？ 问题是，我不能只做import store from './mystore'，因为我在我的configureStore.js中导出它的方式： export default () => {
let store = createStore(persistedReducer, {}, applyMiddleware(ReduxThunk));
let persistor = persistStore(store);
r
浏览 8提问于2019-10-09得票数 0
React路由器6.3.0
是否有一种方法能够在同一个导航调用中传递状态和查询参数，并且两者都已应用？
复制步骤
试一试
导航({路径名："/search"，搜索：?${createSearchParams({ query: someQuery })}，状态：{ someAttributeName: someAttributeValue } )；
请注意，查询参数在URL中传递，但状态为null。
试一试
导航( "/search"，{ search：?${createSearchParams({query: someQuery})}，state
浏览 15提问于2022-09-17得票数 1
在下面的示例中，index.js调用组件DiffState.js，该组件应该等待2秒(以模拟异步操作)，然后返回一个表示"hello“的H1元素。
index.js
import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom";
const DiffState = lazy(() => import("./DiffState"));
ReactDOM.render(
<Suspense fallback={<h1&g
浏览 5提问于2021-01-30得票数 0
回答已采纳
我正在为高阶组件(HOC)内部的React无状态功能组件(SFC)编写jest单元测试。如何使用TestUtils查找证监会中的特定类？
具体地说，我的SFC/HOC如下所示：
import React from 'react'
import sizeMe from 'react-sizeme';
const MyClass = ({myText, size}) => {
return (
<div className="MyClassName">{myText}</div>
);
};
expor
浏览 2提问于2018-01-05得票数 0
回答已采纳
1回答
酶浅非功而装功
、、、
我有以下a.jsx文件，我正在尝试测试该文件：
import React, { Component } from "react";
import { SideNavigation } from "@xxx/react-components-xxx";
import { withTranslation } from "react-i18next";
class Navigation extends Component {
constructor(props) {
super(props);
}
rende
浏览 3提问于2020-02-15得票数 1
1回答
反应/残差测试
、、、、
我正在学习如何用酶来测试React/Redux成分。该组件以应用程序级别的状态作为支持。当我运行测试时，我会得到以下错误：
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
TypeError: Cannot read property 'contextTypes' of undefined
浏览 3提问于2016-12-18得票数 1
回答已采纳
1回答
我正在尝试测试我的组件，它正在通过HOC使用上下文中的数据。
下面是安装程序:模拟上下文模块/context/__mocks__
const context = { navOpen: false, toggleNav: jest.fn() }
export const AppContext = ({
Consumer(props) {
return props.children(context)
}
})
高等OrderComponent /context/withAppContext
import React from 'react'
im
浏览 1提问于2018-12-04得票数 1
回答已采纳
我正在使用Storybook 5.2.6 for React 16.9.0和Typescript 3.5.3，并使用Material UI主题组件。在添加和配置了@ Storybook /addon-docs之后，当组件从@ PropsTable -ui中被包装时，Storybook文档页面在withStyles中显示：“Cannot read property 'classes‘of undefined”。
组件：
import React, {FunctionComponent} from 'react';
import { Typography } from &#
浏览 11提问于2019-11-13得票数 3
我有一个“容器组件”，DashboardContainer，它连接到一个redux商店。
在index.js中的一个级别上，商店提供程序封装了一个AppRouter组件，如下所示：
<Provider store={store}>
<AppRouter />
</Provider>
AppRouter设置如下：
const AppRouter = () => (
<Router history={history}>
<Switch>
<PublicRoute exact path={ROUTES
浏览 0提问于2019-03-01得票数 1
回答已采纳
我用的是反应打字本。我有两个组成部分，一个是孩子，另一个是父母。我正在将ref转发给我的子组件，在我的子组件中，我使用forwardRef绑定导出，但是在导出行上出现了一个错误，即：Argument of type 'FC<ComponentType>' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, ComponentType>'
这是我的代码：
import { forwardRef } from 'react';
im
浏览 22提问于2022-01-24得票数 1
回答已采纳
我有两个js文件。一个是AComponent的代码。在第二个js中，我导入了AComponent文件，此外，我还编写了：
const Ctext = (props) => (....)
如何将两者都导出？
import React, { Component } from 'react';
import AComponent from "./image";
const Ctext = (props) => (
<div>
<h5 className="card-title">Image n Text Card&l
浏览 0提问于2019-12-26得票数 3
1回答
我有一个包含几个助手函数的Helper.js文件，如下所示，它正在不同的组件中使用。
export function buildOptions(elem) {
var oList=[];
for (var i=0; i < field.length; i++) {
oList.push (
<option value={options[i]["id"]}>
{options[i][elem]}
&l
浏览 2提问于2018-07-06得票数 7
回答已采纳
我已经创建了一个带有index.html的React应用程序，如下所示：
<!DOCTYPE html!>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="react-container"></div>
<script type="text/javascript" src="
浏览 0提问于2017-06-01得票数 3
我正在使用redux应用程序在我的反应中尝试单元测试。因此，我需要测试连接的组件，不幸的是，我得到了这个错误：
无法读取未定义的属性“contextTypes”--我在单元测试中使用酶--这里是我的组件：
import React from 'react';
import TextFieldGroup from '../common/TextFieldGroup';
import validateInput from '../../server/validations/login';
import { co
浏览 5提问于2017-01-31得票数 5
回答已采纳
我找到了几个答案(，，.)以及中的docs +测试示例，但我仍然不知道如何在实践中使用它。
您能否提供一个具体的示例，解释在测试React的DOM时所发生的事情以及新的(jest.fn())返回的内容
浏览 0提问于2017-03-21得票数 1
回答已采纳
1回答
下面是我正在尝试使用jest / enzyme测试的React功能组件。 React功能组件代码- export const UserForm = props => {
const {labels, formFields, errorMessages} = props;
const [showModal, setShowModal] = React.useState(false);
const [newId, setNewId] = React.useState('');
const showModal = () => {
浏览 28提问于2020-04-06得票数 1
我有以下简单的组件：
import React from 'react'
import '../css.scss'
export default (props) => {
let activeClass = props.out ? 'is-active' : ''
return (
<div className='hamburgerWrapper'>
<button className={'hamburger hamburger--htla '
浏览 8提问于2017-04-17得票数 42
回答已采纳
我在用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
回答已采纳
在运行npm build run之后，我收到了以下错误，该错误在使用spread操作符删除行后消失：
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/Footer.js
Attempted import error: 'getText' is not exported from './Getters'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-red
浏览 5提问于2020-08-24得票数 0
3回答
React的文档声明组件功能可以由父组件通过refs访问。请参阅：
我试图在我的应用程序中使用它，但是在调用子函数时遇到了"undefined is not a function“错误。我想知道这是否与使用React类的ES6格式有关，因为我看不到我的代码和文档之间有任何其他区别。
我有一个对话框组件，它看起来像下面的伪代码。该对话框有一个调用save()的"Save“按钮，该按钮需要调用子内容组件中的save()函数。内容组件从子表单字段收集信息并执行保存。
class MyDialog extends React.Component {
save() {
thi
浏览 25提问于2015-12-01得票数 34
回答已采纳
1回答
我正在尝试使用Jest和Enzyme测试React组件。目前我的测试非常简单，我只是想确保组件能够挂载： import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './App';
Enzyme.configure({
adapter: new EnzymeAdapter()
});
describe(&#
浏览 9提问于2019-03-21得票数 6
回答已采纳
1回答
在snack.expo.io上启动项目时，默认为
import * as React from 'react';
这和
import React from 'react';
非常感谢你的帮助。
浏览 3提问于2020-07-31得票数 1
回答已采纳
我有以下组件：
export class MyComponent extends React.Component {
boolToTitleCase = (value) => {
return value ? 'True' : 'False';
};
render () {
return (
<div></div>
);
}
然后在我的测试中，我这样做：
import {boolToTitleCase, MyComponent} from './MyComponentFile';
/
浏览 17提问于2019-07-08得票数 0
我正在努力使我在几个组件类中使用的一些函数枯竭。Mixins是不可行的，我正在努力理解我应该使用什么替代方案。将代码设置为模块似乎很有希望，但我不知道如何打包它，以便我可以使用它来扩展几个不同的类。
假设我有：
class functionsToShare {
thingToDo(){
//do a thing
}
}
export default functionsToShare;
我假设在我的component类中，我想要的内容如下：
import React from 'react';
import functionsToShare from '
浏览 13提问于2017-03-07得票数 1
1回答
我有以下react组件。
import React, { Component } from 'react'
export class Dummy extends Component {
public renderCode(){
return 'xm3'
}
render() {
return (
<div>
{this.renderCode()}
</div>
)
}
}
只使用
浏览 0提问于2021-05-06得票数 0
3回答
如何模拟withStyles在material-ui/core/styles.js中的实现
下面是一个测试：
import React from 'react'
import { shallow } from 'enzyme'
import { withStyles } from '@material-ui/core/styles'
import TempComponent from './TempComponent'
jest.mock('@material-ui/core')
it('render
浏览 0提问于2018-07-03得票数 2
回答已采纳
1回答
我看过很多关于测试的教程视频，但通常这些测试都是通过道具给组件或使用data-testid=""的。是否有一种测试非导出函数的方法？我读过关于重连线模块的文章，但问题是Jest不会考虑覆盖报告中从重连线中调用的函数。
// Random.js
import React from 'react'
export function sayHi() {
return '';
}
function ListBox() {
function saySecret() {
return '';
}
retu
浏览 11提问于2022-05-25得票数 0
1回答
响应测试库--模拟一个函数
、、、、
我正在尝试测试一个函数被调用
import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import MyForm from './MyForm';
afterEach(cleanup);
const testFunction = jest.fn();
test('my form', () => {
浏览 1提问于2021-09-03得票数 4
回答已采纳
1回答
在Login函数组件中，我有一个函数validateForm，它检查username和password的长度是否大于零。
function validateForm() {
return username.length > 0 && password.length > 0;
}
我使用Jest作为单元测试工具。
import React from "react";
import Login, { validateForm } from "./Login";
import { render, screen } from "@
浏览 9提问于2021-11-30得票数 0
我熟悉使用export default ExampleFunc，以便可以将ExampleFunc作为import Func from 'filename.js'导入到不同的文件中。
但是，我遇到过export default的一种用法，它将对象导出到同一文件中的一个类。下面的代码是否实例化Container对象？
import ExampleComp from 'file.js';
class Container extends React.Component {
render() {
dostuff;
}
}
export default
浏览 25提问于2018-07-23得票数 2
回答已采纳
这就是我的意思：
import BsssButtonGroup from "react-bootstrap/ButtonGroup";
它的工作方式与以下方法相同：
import ButtonGroup from "react-bootstrap/ButtonGroup";
..and我不明白为什么？
BsssButtonGroup不是React中ButtonGroup组件中现有或定义的组件，那么我如何能够导入它呢？究竟进口的是什么？写一些随意的名字是怎么回事？？我以为你必须进口导出的组件？但是BsssButtonGroup不是导出的，那么我怎么能够导入它呢？
浏览 3提问于2022-09-07得票数 0
1回答
我有一个Flux 商店类：
'use strict';
import flux = require('app/tools/flux');
import types = require('app/tools/types');
import Actions = require('app/actions/actions');
class Store
{
bindListeners(config : any) : void {;};
books : Array<types.IBook>;
select
浏览 3提问于2015-12-23得票数 2
这听起来可能是重复的，因为有类似的问题可用，但它们都没有真正帮助我，所以我正在打开一个新的。
当我尝试在localhost:8000/上运行我的gatsby项目时，出现以下错误
我尝试了我在Web上找到的所有方法(更改导出方法，导入时使用花括号等)但一切都没变。错误是相同的。我也试着重新运行这个项目。
这是我的layout.js
import React, { useEffect } from 'react'
import Header from '../navigation/header'
import Footer from '../nav
浏览 0提问于2021-03-28得票数 1
如何在react-redux项目中解决此错误警告:失败的属性类型:属性store在Provider中标记为required，但其值为undefined。在提供程序中
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import SignUp from './Components/SignUp'
import SignIn from './Co
浏览 3提问于2017-04-06得票数 13
回答已采纳
1回答
这个问题类似于。
当所有代码都在一个文件中时，它可以正常工作。但是，当我将组件放到另一个文件并尝试导入时，类型记录编译器会出现错误。
密码看上去没问题。
我得到的错误是
JSX元素类型'Hello‘没有任何构造或调用签名。
app.tsx
/// <reference path="typings/tsd.d.ts" />
import React = require('react');
import ReactDOM = require('react-dom');
import $ = require('jqu
浏览 3提问于2016-02-22得票数 3
回答已采纳
我在VS代码中使用，但我不确定使用哪种“类型”的导出。如果导出应该在类/功能组件声明处或在文件末尾。
在下面的代码中，我有2个类组件导出和3个功能组件导出。
以下哪一项是推荐的？
// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'
export default class myComponent extends Component {
render(
浏览 0提问于2019-06-08得票数 0
这可能是非常基础的。在上，他们展示了“导出默认”的示例，以及“导出默认”之前的组件定义，例如：
import React from 'react';
import { Text, TextInput, View } from 'react-native';
const Cat = () => {
return (
<View>
<Text>I am also a cat!</Text>
</View>
);
}
const Cafe = () => {
ret
浏览 10提问于2021-03-05得票数 0
我在我的TypeScript测试中有一些代码，比如：
function foo() {
return 'bar';
}
我想和大家分享我所有的测试。简单的解决方案是将函数复制到每个*_test.ts文件中。
如何在松露测试中从foo_test_helper.ts“导入”此代码？
如果可能的话，我想避免添加Babel到我的构建。它应该与npx truffle init创建的项目一起工作。如果您建议Babel，那么请包含(指向)设置此操作所需的说明。
浏览 0提问于2019-11-27得票数 1
1回答
我正在构建一个简单的React应用程序，并尝试测试在组件中执行某些逻辑的一些功能。我有柏树测试，但我现在试着用玩笑。
这个特定的函数需要返回最频繁的字符串。这个功能现在起作用了，就像.
favourite(item) {
return item.sort((a,b) =>
item.filter(v => v===a).length
- item.filter(v => v===b).length
).pop();
}
我的测试(目前不起作用)是这样的.
import React from "react";
im
浏览 2提问于2019-09-25得票数 1
1回答
测试剩余连接组件
、、、、
我在React中有以下连接组件-Redux
export class IncrementalSearch extends React.Component {
constructor(props) {
super(props);
this.onSearch$ = new Subject();
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
this.subscription = this.onSearch$
浏览 2提问于2017-08-10得票数 0
这是我的主要部分类，所有到链接的路线都保留在这里。
export default class Section extends React.Component {
render() {
return (
<div style={{backgroundColor:"white"}}>
<Routes>
<Route path="/" element={<Home/>} />
浏览 5提问于2020-11-11得票数 32
回答已采纳
1回答
我在下面的例子中遇到了关于如何导出嵌套常量'mapObj‘的问题，因为我需要在另一个组件中从这个对象中获得一些信息。当我想导出嵌套的常量时，我得到了一个错误，你只能在顶部导出。 第一个组件： const Mapper = ({
componentId,
width,
height,
xRenderCoord,
yRenderCoord,
zoom,
浏览 12提问于2020-10-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
