Expect不是react测试库中的函数
。在react测试库中，常用的测试函数是render、fireEvent、screen等。
render函数用于渲染React组件，并返回一个包含组件的测试工具对象，可以用于断言和交互。fireEvent函数用于模拟用户事件，例如点击、输入等，以便触发组件的相应行为。screen对象提供了一组用于查询和断言组件渲染结果的方法，例如screen.getByText、screen.getByRole等。
这些函数和工具可以帮助开发者编写和运行React组件的单元测试和集成测试，确保组件的行为和渲染结果符合预期。
腾讯云提供了一系列云计算相关的产品，包括云服务器、云数据库、云存储、人工智能等。具体推荐的产品和介绍链接地址可以根据实际需求和场景进行选择。
相关·内容
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
回答已采纳
我正在使用tippy库来处理我的应用程序中的工具提示。现在，我想测试当组件悬停在元素上时，组件是否显示工具提示内容。tippy库表示工具提示是由mouseEnter或focus事件触发的。
在测试它时，我使用fireEvent.mouseEnter()事件触发工具提示。它工作得很好，可以通过。但是当我使用userEvent.hover()的时候，它就没用了。userEvent.hover() 不支持 mouserEnter 事件吗?或者帮助我理解为什么在这里不起作用。
注意：fireEvent.mouseOver()在这里不工作。
我知道tippy已经被测试过了。我只是好奇为什么它不与user
浏览 20提问于2022-11-20得票数 2
回答已采纳
1回答
我有一个函数组件，我想用jest编写测试。但我无法评估结果。我应该如何为这样的组件编写测试？下面是我要测试的组件：
import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { addExpense } from "../store/expenses/a
浏览 7提问于2021-12-29得票数 0
回答已采纳
问题：我有多个下拉列表，我正在检查其中是否有一个是打开的。我如何在React测试库中做到这一点？(我正在查看一堆tabIndexes并检查它们)
问题： container.querySelectorAll在react测试库中是不可能的。
代码：
it('should not expand dropdown for multiple view', () => {
const { container } = render(
getMockedComponent()
)
expect(container).toBeVisible()
浏览 8提问于2020-09-23得票数 7
1回答
我有一个自定义钩子，我正在尝试编写使用react测试库包的测试，我想知道如何测试未在自定义钩子中返回但在其他函数中使用的内部函数。
const customHook = () => {
const [count, setCount] = React.useState(0);
const doSomeThing = () => {
..code
}
const increment = () => {
doSomeThing(); //Would like to make assertations on this
setCount((x
浏览 2提问于2021-08-27得票数 0
回答已采纳
1回答
我是新的反应和尝试测试我的代码使用玩笑&测试-库/反应。
我做了一个简单的选择框，并在该框上触发了更改事件。我只想得到这个州，但我还是不知道怎么得到它。
这是我的组成部分：
import React from "react";
import ReactDOM, { render } from "react-dom";
import NativeSelect from "@material-ui/core/NativeSelect";
const MyTest = () => {
const [option, setOption
浏览 0提问于2019-09-06得票数 1
回答已采纳
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
回答已采纳
1回答
测试单击删除后模式是否消失
、、、、
具有反应测试的初学者，
我正在使用jest和react测试库，这里我有一个组件'A‘，这是一个模式，我试图对它进行测试，当用户点击一个按钮’删除链接‘时，这个模式应该消失(函数onDelete)。正如你所看到的，我使用FireEvent.click()点击按钮，所以当它将toHaveBeenCalledTimes(0)从0改为1时，我得到了Expected number of calls: 1 Received number of calls: 0，不应该期望和接收都是1吗？
单击Delete Link后，用户应该看不到end组件(模态)。
有没有人能给我点启发？如有任何建议或帮助，我
浏览 0提问于2021-11-25得票数 1
我是测试新手，我正在尝试使用react测试库测试我的应用程序。我遇到的第一个问题是测试组件内部的函数，比如事件处理程序。我发现在组件中将函数(事件处理程序)作为道具传递的例子很少，但如果可能的话，我不想这样做。 我的组件： import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types&
浏览 42提问于2021-01-21得票数 4
回答已采纳
当我尝试使用Jest +酶的快照测试时，我得到了一个错误：Invalid Chai property: toMatchSnapshot。我已经将我的React版本更新到了16.2，并且我使用了enzyme-to-json库和酶3。
代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import ConnectedApp, { App } from './App';
import { ConnectedRouter } from 'react-router-
浏览 0提问于2017-12-16得票数 8
我是个新手，对所有的测试库都很困惑。我让我的测试代码正常工作，但为了使用它的toMatchSnapshot()，必须从react- test -renderer调用create()，并且为了使用它的断言，必须从@testing-library/react调用render()，这似乎是多余的。
import {render} from '@testing-library/react';
import {act, create} from 'react-test-renderer';
it('renders a login screen', ()
浏览 1提问于2019-11-01得票数 15
3回答
模拟删除材料-ui芯片
、、、
我想写一个测试，它在我的InputTag组件中删除了一个物质ui芯片组件.知道怎么做到吗？到目前为止，这是我最好的机会：
import React from 'react';
import InputTag from '../../src/components/InputTag.js';
import renderer from 'react-test-renderer';
import {shallow, mount} from 'enzyme';
import {spy} from 'sinon';
desc
浏览 2提问于2017-09-03得票数 4
回答已采纳
2回答
我正在测试包含异步函数的代码。即使在测试不使用await的流时，测试也会失败。当我删除async/await (这是可能的，因为测试流不需要它)时，测试通过。 我已经构建了代码和测试的简化示例。 (1)使用async/await的代码示例(尽管在我的测试流程中不需要这样做)： import React from 'react'
export class Example extends React.Component {
state = { first: false }
async func1 () {
const selection = await thi
浏览 19提问于2019-01-29得票数 0
我们一直在使用React钩子、useReducer和useContext来处理react应用程序中的全局存储。
当使用react测试库运行测试时，我们注意到，一旦我们的状态在一个测试中发生了变化，接下来的所有测试都会发生该状态的变化。
我们曾尝试使用afterEach(cleanup)进行清理，但没有成功。
不确定是怎么回事？
import React, { useContext, useReducer } from 'react'
import { render, fireEvent } from '@testing-library/react'
import
浏览 19提问于2020-02-07得票数 5
我正在使用酶/Jest来为我的组件上的一个函数编写一个测试，这个测试是通过一个材料菜单图标的onClick触发的。函数作为道具传递给组件。在编写测试时，它会给我模拟点击的错误。
import React from 'react';
import scssstyles from './ToggleSideNavComponent.scss';
class ToggleSideNavComponent extends React.Component {
render() {
return (
<
浏览 0提问于2018-05-10得票数 0
1回答
我正在使用TypeScript编写一个React应用程序。我使用的材料-ui作为我的组件和反应测试-库我的单元测试。
我正在为material的Grid组件编写一个包装器，这样我总是有一个容器。
import Grid from "@material-ui/core/Grid";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import React, { PureComponent } from "react";
import styl
浏览 1提问于2018-11-03得票数 5
回答已采纳
3回答
最近，我已经将我的React项目升级为ant设计v4，并且所有使用Select、AutoComplete或工具提示的测试都失败了。基本上，当单击组件时，JSDOM中不存在模式或选择选项。这过去在v3中运行得很好。
有人能告诉我如何用react测试库测试antd v4吗？
示例：
我的组成部分：
import React from "react";
import "./styles.css";
import { Select } from "antd";
const { Option } = Select;
function handleCha
浏览 7提问于2020-04-07得票数 11
回答已采纳
我在试着掌握测试。从概念上讲，我很难确定应该测试什么。
这个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
回答已采纳
我大部分的测试经验都是使用Cypress的。我试图用React测试库(此后称为"RTL")测试一些。我想知道我是否能应用一些我在Cypress上使用的技巧。
我有一个部分，我的(网络)应用程序，显示一个表格的搜索结果从一个数据库。search是用GraphQL实现的。我们在前方使用阿波罗。搜索可以对<FilterCheckbox/>组件进行过滤.它包括四个复选框和一个“清除所有”按钮。复选框状态存储在阿波罗缓存中。
我正在为这个组件编写规范。我希望测试在默认情况下，前两个复选框是否被选中，并且单击“清除筛选器”将取消所有复选框。我有以下几点：
import Reac
浏览 9提问于2020-05-10得票数 3
回答已采纳
我刚刚开始使用react测试库，所以我猜想这最终是由于用户错误，但我看到了下面的行为，这对我来说没有意义。
对于以下测试，在新创建的CRA应用程序中运行，并使用jest-dom 3.0.0和react库5.4.4：
import React from "react";
import { render } from "react-testing-library";
import "jest-dom/extend-expect";
import Component from "./Component"
浏览 0提问于2019-01-10得票数 1
回答已采纳
3回答
我正在使用Enzyme对我的反应组件进行单元测试。我理解，为了测试未连接的原始组件，我只需导出并测试它(我已经这样做了)。我已经成功地为连接的组件编写了一个测试，但是我真的不确定这是否是正确的方法，也不确定我到底想为连接的组件测试什么。
Container.jsx
import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';
const mapStateToProps =
浏览 0提问于2016-08-17得票数 24
回答已采纳
3回答
不正确的测试执行队列
、、、
// file.spec.js
describe('[test]', () => {
it('first', () => {
expect(true).toBeTruthy();
});
it('second', () => {
expect(true).toBeTruthy();
});
});
在file.spec.js -> ctrl + S (首次保存)中：
[test]
first
second
在file.spec.js -> c
浏览 0提问于2018-04-03得票数 0
回答已采纳
1回答
我正在从这个学习TDD，但是不明白作者是如何得到describe和它的，这些不是一般来自Jasmine吗？我在作者的github的node_modules中没有看到这个包，他的tests.js也没有导入任何看起来像describe或it的东西。这两种方法从何而来？
import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
describe('Test suite for User
浏览 5提问于2016-10-05得票数 3
1回答
我试着用Jest测试一个React原生库，但是它显示了错误，有人能帮我解决我的问题吗？
这里是我的密码：
export const createChannel = (): void => {
PushNotification.createChannel({
channelId: 'test-channel',
channelName: 'Test Channel',
vibrate: true,
});
};
我对这个函数使用了function本机推送通知库。
这是我的测试代码：
import PushNotificatio
浏览 8提问于2022-06-10得票数 0
回答已采纳
我正在对简单的按钮组件运行一个测试。但是，在测试覆盖率中，我得到了一个未测试的行(21：onClick: () => { return true })。这条线指向默认的props函数。我如何确保我已经覆盖了这一行的单元测试？ 我的组件： import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
export const Button = (props) => {
return (
浏览 8提问于2020-03-23得票数 1
我有下面的代码，我正在使用Sinon
import React from 'react';
import { mount } from 'enzyme';
import sinon from 'sinon';
import { IncrementalSearch } from './IncrementalSearch';
describe('<IncrementalSearch />', () => {
afterEach(() => {
this.constructorSpy.re
浏览 2提问于2017-07-03得票数 2
1回答
我用的是反应。我使用基本的redux计数器，使用redux-工具箱。我在测试方面真的很新。我正在用酶和Jest做测试。我的redux计数器intialState是1。从我的测试中，我首先在it范围内使用intialState，然后在模拟(‘单击’)增加按钮后，我得到了预期的结果2。当我试图测试it作用域中的减少按钮时，它将获得it作用域的结果。如果我把intialState 1放在it按钮的it范围内，它会给我失败的测试，因为它期望2。
这是我的测试文件
import React from 'react';
import { mount } from "enzyme&#
浏览 4提问于2020-07-29得票数 1
回答已采纳
1回答
测试反应形式内部提交
、、、、
我有这样的组成部分：
function Form() {
const [value, setValue] = useState('');
const hanleSubmit = (ev) => {
ev.preventDefault();
console.log('submit', value);
}
return (
<form onSubmit={props.onSubmit}>
<input type="text" value={value} onChange={e
浏览 8提问于2021-12-14得票数 0
我正在使用mocha，酶创建react组件的单元测试。下面是一个示例组件。
Foo.js
class Foo extends React.Component {
customFunction=() => {
}
render() {
return (<div className={this.props.name}/>);
}
}
这是测试文件。
Foo-Test.js
import React from 'react';
import { expect } from 'chai';
import
浏览 5提问于2016-03-01得票数 17
1回答
我正在处理一个反应组件，由一个字段和一个提交按钮组成。
我有一个名为“onMapPointAdded”的事件，当用户输入文本并单击Submit按钮时会触发该事件。
我怎么测试它呢？提前感谢！
我正在处理以下反应部分：
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addMapPoint } from '../actions'
export class AddMapPoint extends C
浏览 3提问于2016-06-14得票数 0
我正在尝试测试一个React组件，它运行一些异步代码并在componentDidMount中调用setState。
下面是我想要测试的react组件：
/**
*
* AsyncComponent
*
*/
import React from 'react';
class AsyncComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
component: null,
};
浏览 1提问于2017-06-08得票数 11
我有一个组件，它有几个useState钩子： const [resizing, setResizing] = React.useState(false);
const [x, setX] = React.useState(0);
const [y, setY] = React.useState(0); 在某些地方，我同时调用多个钩子，例如在onResize中，我同时调用setResizing和setX或setY钩子： <ResizableBox
height={520}
width={370}
minConstraints={[370, 520]}
ma
浏览 10提问于2020-09-10得票数 7
我生成了一个项目，使用create和-typescript选项。
这是我的应用程序：
import React from 'react';
const App: React.FC = () => {
return (
<div className="App">
<div>
<h1 id="pageHeader">Home page</h1>
<p>This is the Home page</p&g
浏览 7提问于2019-12-09得票数 0
回答已采纳
问题：
我正在尝试测试ES6中React无状态组件的单击功能。但是，当使用sinon监视handleClick函数时，我得到的响应是...
TypeError: Cannot read property 'goToFullCart' of undefined
我已经尝试了其他一些方法。当组件是类组件时，其中一些方法似乎可以工作，但在使用无状态功能组件时，所有方法似乎都失败了，如下所示……
代码：
import React from 'react'
import PropTypes from 'prop-types'
import SVG fr
浏览 5提问于2018-01-12得票数 3
我有一个组件库，我正在编写使用Jest和react测试库的单元测试。基于某些道具或事件，我想验证某些元素没有被呈现。
如果没有找到元素，则getByText、getByTestId等在react-testing-library中抛出和出错，导致测试在expect函数触发之前失败。
你如何使用反应测试库来测试在玩笑中不存在的东西？
浏览 9提问于2018-10-12得票数 296
回答已采纳
这是一个简单的反应组件。我正在为单元测试组件使用function测试库，并且我无法使用handleClick测试TestComponent的jest.spyOn()函数。有人能帮忙吗？
组件
import React from 'react';
const Button = (props) => (
<button onClick={props.handleClick}> {props.text}</button>
);
const TestComponent = () => {
const handleClick = () =&
浏览 3提问于2021-06-20得票数 2
回答已采纳
我是单元测试的新手，我真的很感谢你的帮助。下面是组件 import React from 'react';
import PropTypes from "prop-types";
import {Textfit} from 'react-textfit'; //This will fit the text how big or small it is.
class DisplayPanel extends React.Component {
render() {
return (
<Te
浏览 9提问于2019-03-18得票数 1
回答已采纳
1回答
我需要的帮助来测试这个组件使用库与业力和摩卡。
import React from 'react';
import {Clock} from 'Clock';
import {CountdownForm} from "CountdownForm";
import {Controls} from "Controls";
export class Countdown extends React.Component {
constructor(props) {
super(props);
this.state =
浏览 9提问于2017-02-17得票数 0
我有一个提交按钮，它在表单域不包含有效数据时禁用，当数据正确时启用。我使用'useEffect‘钩子来检查表单的状态，并更新确定disabled是否为真或假的变量。
useEffect(() => {
if(...) {
setValues({...values, isFormValid: true});
}
}, [values]);
根据values.isFormValid，disabled属性会更改其值
<Box m={2}>
<Button variant="contained"
typ
浏览 53提问于2019-08-05得票数 2
我刚开始反应，搜索了很多资料，但没能解决我的问题……
当我通过“模拟(点击)”点击按钮时，我可以看到测试的正确结果‘调用pros.onPointDelete’。但是在此之后，我应该会看到这个包装器(pointsList)的新道具，它来自根应用程序组件，其中我有onClick处理程序。而且它没有更新。这是'points.length等于1‘的第二个测试失败了。PointsList组件是功能组件。
我试图通过afterEach()函数更新包装器，但它没有工作。也许这个问题与我的包装器的挂载()方式有关？但是我不能使用浅层()方式，因为我需要在当前测试中访问包装器的子组件的子组件。你能帮帮我
浏览 6提问于2019-02-08得票数 1
回答已采纳
目前在我的项目中，我正在使用Karma和Mocha，以及React Test-Utils来测试我的react组件。
我目前有大约1200个测试，其中大部分是针对我的react组件库的。
当这些测试运行时，chrome通常会超过2 2gb的内存，并且它的CPU使用率会达到30%以上
我的大多数测试都是这样的-
const React = require('react');
const TestUtils = require('react-dom/test-utils');
const ReactDOM = require('react-dom');
浏览 5提问于2017-05-31得票数 1
React测试库在呈现过程中不应用材料UI组件的sx支持。
例如，我指定属性来隐藏某个断点上的元素。
<>
<AppBar
data-testid="mobile"
...
sx={{
display: { xs: "block", sm: "none" }
}}
>
MOBILE
</AppBar>
<AppBar
data-testid="desktop"
...
sx={{
dis
浏览 7提问于2022-02-22得票数 9
我需要重构所有的酶单元测试，以反应本机测试库。
在酶中，为了获得子元素的道具，我可以使用一些东西，比如：
((rootElement.props() as Props).prop).toBe(value)。
函数的作用是:返回包装器当前节点的属性散列。注意:只能在单个节点的包装器上调用。
我如何在react本机测试库中做同样的事情？
我应该只把完整的路径传递给道具吗？如下所示：
expect(nextUpNoThanksButton[0].props.children.props.isSelected).toEqual(true);
或者有其他方法可以做到这一点？
浏览 9提问于2021-09-03得票数 0
1回答
我是TDD的新手。我决定使用react测试库启动TDD以进行开发。假设我应该检查组件中的支柱和简单文本：
import { render, screen } from '@testing-library/react';
import Card from '../Card';
test('render without crash', () => {
render(<Card />);
expect(screen.getByText('Card Component')).toBeInTheDocument(
浏览 6提问于2022-01-03得票数 0
如何在Jest / React测试库中编写单元测试，以使用npm库react-error-boundary测试React的错误边界是否正常工作？例如。
const ErrorFallback = ({error}) => <p>There was an error!</p> // can use error.message later
const SimpleComponent = () => <h1>Hello, world</h1>
const TopLevelComponent = () => (
<
浏览 0提问于2021-10-11得票数 0
3回答
我遵循React文档的建议，通过组合创建一个专门的组件：
export default class AlertPanel extends React.Component {
constructor(props) {
super(props);
}
render() {
textRows = <div>{this.props.text}</div>;
}
return (
<Alert bsStyle={this
浏览 2提问于2017-01-19得票数 0
回答已采纳
2回答
单元测试无状态组件方法
、、、、
我有一个react的无状态组件
const Clock = () => {
const formatSeconds = (totalSeconds) => {
const seconds = totalSeconds % 60,
minutes = Math.floor(totalSeconds / 60)
return `${minutes}:${seconds}`
}
return(
<div></div>
)
}
export default Clock
浏览 0提问于2017-06-27得票数 8
3回答
模拟反应-多玛·杰斯特
、、、
我试着用Jest来模拟react dom模块
import React from 'react';
import {configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Link from '../components/DumbComp';
import { shallowToJson } from 'enzyme-to-json';
import { render } from '
浏览 2提问于2018-04-09得票数 3
回答已采纳
当我将茉莉花作为一个大口的任务运行时，测试似乎运行得很好，尽管第一个总是被认为是失败的。我不确定问题出在哪里。
React组件
import React, { PropTypes } from 'react';
const propTypes = {};
const defaultProps = {};
class Foo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="
浏览 0提问于2016-10-22得票数 0
1回答
我想测试一个使用全局fetch方法的小型React web应用程序。 我试着用这种方式嘲笑fetch： global.fetch = jest.spyOn(global, 'fetch').mockImplementation(endpoint =>
Promise.resolve({
json: () => Promise.resolve(mockResponse)
})
); ..。但是模拟似乎被忽略了，而内置的fetch似乎被使用了：Error: connect ECONNREFUSED 127.0.0.1:80 ...看起来像是对内置fet
浏览 26提问于2020-06-16得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
