如何模拟组件方法？
模拟组件方法是指在开发过程中，为了测试或模拟特定的组件行为而创建一个虚拟的组件方法。这样可以在不依赖实际组件的情况下进行测试、调试或模拟特定场景。
在前端开发中，可以使用各种测试框架和工具来模拟组件方法。以下是一种常见的方法：
- 使用 Jest 测试框架：Jest 是一个流行的 JavaScript 测试框架，它提供了一套强大的工具和 API 来模拟组件方法。可以使用 Jest 提供的
jest.fn()方法创建一个模拟函数，然后将其作为组件方法的替代品。 - 使用 Jest 测试框架：Jest 是一个流行的 JavaScript 测试框架，它提供了一套强大的工具和 API 来模拟组件方法。可以使用 Jest 提供的
jest.fn()方法创建一个模拟函数，然后将其作为组件方法的替代品。 - 使用 Sinon.js 库：Sinon.js 是一个独立的 JavaScript 测试工具库，它提供了丰富的功能来模拟和监视函数的行为。可以使用 Sinon.js 提供的
sinon.stub()方法创建一个模拟函数，并将其替代组件方法。 - 使用 Sinon.js 库：Sinon.js 是一个独立的 JavaScript 测试工具库，它提供了丰富的功能来模拟和监视函数的行为。可以使用 Sinon.js 提供的
sinon.stub()方法创建一个模拟函数，并将其替代组件方法。 - 使用 React Testing Library：React Testing Library 是一个用于测试 React 组件的工具库，它提供了一套简单而强大的 API 来测试组件的行为。可以使用 React Testing Library 提供的
render()和fireEvent方法来渲染组件和触发事件。 - 使用 React Testing Library：React Testing Library 是一个用于测试 React 组件的工具库，它提供了一套简单而强大的 API 来测试组件的行为。可以使用 React Testing Library 提供的
render()和fireEvent方法来渲染组件和触发事件。
以上是一些常见的方法来模拟组件方法。根据具体的开发环境和需求，可以选择适合的测试框架或工具来进行组件方法的模拟。
相关·内容
3回答
要做到这一点，必须有一个简单的方法，但我在任何地方都找不到文档化的语法。我有一个带有道具的，我想在Jest中像这样模拟它：
jest.mock('./common/MultiSelect', 'MultiSelect');
这是可行的，只是我最后得到了一个反应警告，把测试结果弄得乱七八糟：
警告:标签上的未知道具options。从元素中移除这个支柱。
我正在嘲弄的组件确实有一个选项道具，我真的不在乎它是如何呈现的，所以我怎么能以一种不会抛出警告的方式来模拟它呢？我试着在模拟中使用React.createElement，并无休止地返回一个元素名称和支持参数
浏览 3提问于2017-09-05得票数 16
回答已采纳
1回答
我有一个Lerna monorepo，一个@project/shared-component子包和一个@project/consumer子包。@project/shared-component包公开了一个SharedComponent react组件，该组件在内部使用了一个同样公开的useData挂钩。在@project/consumer中，我有一个呈现SharedComponent组件的ConsumerComponent。在@project/consumer中，我还有一个测试ConsumerComponent的测试。在这里，我想用Jest来模拟useData钩子的内部。这是我用来模拟的代码
浏览 24提问于2021-10-15得票数 0
1回答
我有以下内容：
import { Query } from 'react-apollo';
const Comp = ({ getQuery, variables }) => {
<Query query={getQuery} variables={{ ...variables }}>
{({ loading, error, data }) => {
if(loading){
return <div>Loading...</div>;
} else if(error){
浏览 5提问于2021-03-15得票数 0
回答已采纳
2回答
我想模拟react类的方法，这样单元测试就可以按照模拟函数运行。
React: 16.8.6 jest: 24.8.0
Overview.js
import React from 'react';
export default class Overview extends Component{
test1(){
return {
// fetch api
}
}
test2(){
const result = this.test1();
// do other thing
return result
}
浏览 1提问于2019-08-02得票数 1
我正在搜索如何在我的应用程序中实现单元测试功能，但可用的资源有限，是否有任何可用文档提供在ReactNative应用程序中添加单元测试功能的分步指南。
因为大多数文档都过时了，因为有人说我们需要模拟react-native，然后导入react/addons，这是现在不可用的。
现在React中没有加载项文件...
浏览 2提问于2016-08-25得票数 0
1回答
我正在写一个有物理模拟的应用程序。每一种模拟在物理上和画布上画的东西都不一样，但在广义的东西上却不一样，例如：
处理地址栏中设置模拟的参数
如何为要发送给他人的模拟生成URL
如何将模拟数据发送到数据服务中
如何创建一个反应性表单组件来控制仿真。
等等。也就是说，在每个模拟中，有许多部分是完全相同的，但是我现在在每个模拟中都有相同的代码。在每一次模拟中，总共有300-400行重复代码，显然很好地扩展了我的应用程序。
我想将处理这些非模拟特定问题的所有一般功能放到另一个文件中，然后与每个模拟一起加载。公共文件中的更改会影响使用它的所有模拟。
--这不是真正的应
浏览 0提问于2020-10-16得票数 1
回答已采纳
1回答
你好，我正在尝试使用Mockito来制作测试用例，但我真的想不出如何使用(Mockito)，甚至无法测试简单的方法。我有两种方法可以使用模拟对象来测试它们？
public int addTwoNumbers(int a, int b)
{
return a+b;
}
public int divideTwoNumbers(int a, int b)
{
return a/b;
}
浏览 4提问于2015-11-12得票数 1
回答已采纳
我们有一个下拉组件，它的下拉列表在任何外部单击时都会崩溃。这项工作的实施情况如下：
@HostListener('document:click', ['$event'])
public documentClick(event) {
if (this.dropdownIsOpen && !event.clickedFromMe) {
this.dropdownIsOpen = false;
}
}
如何测试这些代码？当使用TestBed.createComponent时，似乎只创建了组件，并且它不在任何文档中
浏览 1提问于2018-04-17得票数 5
回答已采纳
2回答
我想测试我的控制器，它依赖于硬件C#类，而不是接口。
它被配置为单例，我只是想不出如何RhinoMock它。
依赖类的硬件元数据(示例)：
namespace Hardware.Client.Api
{
public class CHardwareManager
{
public static CHardwareManager GetInstance();
public string Connect(string clientId);
}
}
在我的代码中，我希望这样的东西返回true，否则我会得到一个异常
if( !CHardwareManager.G
浏览 1提问于2011-04-20得票数 0
如何使用jest和react测试库来模拟TRPC客户端的单元和集成测试？
浏览 13提问于2022-11-22得票数 0
我成功地在具有postActionEvent()的JTextField上使用ActionListener来模拟用户操作(按Enter键)。我想为具有JComboBox的ActionListener创建相同类型的模拟，但没有为JComboBox找到postActionEvent()。如何实现这个(模拟用户按Enter键)？
浏览 4提问于2014-10-21得票数 0
2回答
我是单元测试的新手，我想知道如何对依赖于一个服务的组件进行单元测试，而这个服务又依赖于许多其他服务。下面是我的初始设置。
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComp],
providers: [TestService]
}).compileComponents();
}));
但是这样做，它就无法找到它所依赖的其他服务。然后我会像这样提供其他服务。但随着这些服务使用其他服务等，它会持续增长。
beforeEach(async(
浏览 0提问于2018-01-11得票数 0
1回答
我有一个实体组件系统，我希望有一个Physics组件，它可以将给定的对象添加到物理模拟中。
我的问题之所以出现，是因为子弹API要求我在进行模拟之前添加每个对象。
我应该如何继续创建一个系统(实体组件术语中的系统)，在添加和删除Physics组件时包装弹物理API来进行模拟？
编辑：
这就是我的实体组件系统的样子。
class Entity
{
std::unordered_map< size_t, void* > components;
public:
// setters getters for components based on key
}
class
浏览 0提问于2013-12-15得票数 0
回答已采纳
我有一个Blazor服务器端应用程序，我将把它托管在离我的主要用户使用的地方不太近的服务器上，我想要模拟一些功能是否可以在一些延迟的情况下使用，或者延迟是否真的会影响它。
但我不能在开发时测试延迟，我也不想每次想要测试某些更改时都在服务器上运行构建。
我尝试了很多方法，比如在chrome开发工具中减少互联网连接，但它与远程主机的延迟不同。
如何在Blazor服务器端模拟延迟？
浏览 5提问于2020-12-10得票数 1
我在JMenuItems的一个层的JPanel中有一组JLayeredPane，在较高层的JPanel中有一个模拟游标。当菜单项重新绘制时，它们会在模拟的游标上绘制(而不会触发游标层的重新绘制)。有趣的是，如果我用JButtons或JLabels代替菜单项，每次重新绘制菜单项时，光标都会被正确地绘制。
如何确保重新绘制菜单项将导致受影响的较高层区域也重新绘制，而不直接调用分层窗格上的deeply ()？我所描述的情况与实际情况相比有些简化:菜单项可能深深嵌套在分层窗格的子窗格中，而且它们根本不应该知道分层窗格。
下面是我所描述的伪代码片段：
public void initGui(Dimens
浏览 0提问于2011-04-14得票数 3
回答已采纳
1回答
使用标准t:pagelink组件时，可以传递任意数量的自定义class属性或一些data属性：
<t:pagelink page="somepage" data-somedata="test">link name</t:pagelink>
它们将包含在生成的a标记中：
<a href="/somepage" data-somedata="test">link name</a>
这不适用于我创建的组件。当我有：
<t:misc.custompagelink page="s
浏览 3提问于2015-02-17得票数 1
回答已采纳
3回答
如何在另一个类中模拟异步函数调用
、、、、
我有以下(简化的) React组件。
class SalesView extends Component<{}, State> {
state: State = {
salesData: null
};
componentDidMount() {
this.fetchSalesData();
}
render() {
if (this.state.salesData) {
return <SalesChart salesData={this.state.salesData} />;
} else {
浏览 0提问于2017-12-12得票数 24
2回答
单元测试在现实中有多有效？
我的印象是，在某个时候，单元测试会变成测试对象与另一个对象之间的依赖关系的测试。当然，人们总是可以使用接口抽象依赖关系，但是即使是接口也应该改变时会发生什么呢？如果被测试的单元不再依赖于这些依赖项，该怎么办？
如果我们的测试因为依赖问题而失败，这是否意味着它们太耦合到我们的代码中？此外，我们是否必须每次更改依赖项时都要更改它们？如果这种情况经常发生，这是否表明我们的设计是错误的？
我倾向于认为单元测试是测试确保健壮性的一种有效方法，但是如果它们太耦合到我们的对象与其他对象之间的依赖(不管它们是以接口表示的)，那么它只会导致更多的时间浪费在修复这些测试以通过新的设计上
浏览 0提问于2011-10-12得票数 3
我在努力提高我的测试技能。我经常听说过模拟框架来构建假对象(据我所知)。现在我需要测试我的存储库(常用的add、remove、update和GetById方法)。
我做这个测试是为了确保数据库上的每个操作都正确进行。
问题是:我真的需要模拟存储库吗？例如，添加一个假存储库，我将丢失数据库引擎配置测试部分(即使用真正的存储库，而不是模拟，即使实体框架映射不正确，我的测试也会失败)。
这样想对吗？我该如何处理这个问题？
浏览 0提问于2014-09-17得票数 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
测试与formik一起使用react-testing-library的组件通常很麻烦，因为onSubmit方法是异步调用的，并且可以在实际调用submit函数之前使您的测试超时。如果您检查这些文档，就会有一个示例来避免这个问题，该问题是对onSubmit回调函数的模拟：
test('rendering and submitting a basic Formik form', async () => {
const handleSubmit = jest.fn()
render(<MyForm onSubmit={handleSubmit} />)
浏览 20提问于2022-07-14得票数 0
1回答
假设我有一个软件组件A(函数、类、反应组件等等)。它使用另外三个软件组件B、C、D。
如果我试图测试完全测试A (没有模拟！)，那么我必须对组件A、B和C实现(单元)测试。
我的问题是:我是否应该使用：
不带嘲讽的集成测试
带有模拟+单元测试的集成测试
欢迎任何相关资源。提前谢谢你的时间！
浏览 0提问于2021-01-06得票数 1
回答已采纳
1回答
无法模拟点击笑话测试
、、、
我正在学习使用jest进行一些react +测试，我有一个具有三个数字输入和一个按钮的组件。这是一个简单的计算器，只使用乘法运算。
不要担心代码的其余部分，我只是尝试模拟执行操作的单击(在本例中，它将调用模拟函数，如测试所示)。
这是测试
function setup() {
const component = shallow(<Multiplier />);
return {
component: component,
button: component.find('#multiplyButton')
}
}
浏览 1提问于2017-07-28得票数 0
我正在尝试模拟泛型，我能够模拟一些泛型表达式，但我不知道如何模拟泛型初始化
浏览 5提问于2016-06-30得票数 1
3回答
jMock中的模拟和存根有什么区别？我可以用jMock同时创建这两个吗？如何使用它创建存根，以及最适合的情况是什么，我相信当我需要为测试准备一些状态时，就可以使用存根。
谢谢
浏览 2提问于2011-04-23得票数 1
假设我有一个React组件，它是一个带有用户名字段的Login表单。如果用户将用户名设置为空字符串，则组件将显示错误消息。
下面是代码：
const LoginForm = () => {
const [errorMessage, setErrorMessage] = useState(''),
handleOnChangeUsername = (newUsername: string) => {
if (newUsername.trim() === '') {
setErrorMessage('Use
浏览 1提问于2019-09-02得票数 1
回答已采纳
我读了3遍vue-utils-test文档和jest文档，但我不知道如何准确地模拟vue组件中的vue混合并测试组件。
浏览 2提问于2017-11-16得票数 25
回答已采纳
2回答
我使用useState钩子编写了一个功能组件，该组件本身运行良好，但我在测试它时遇到了问题。我不明白如何在组件中创建初始状态。我尝试过多种方法来嘲弄useState，但没有一种方法奏效：
describe('<Component/>', () => {
beforeEach() = > {
jest.spyOn(Readt, 'useState').mockImplementation( () => React.useState(['test']));
//Also tried
浏览 4提问于2020-02-03得票数 1
回答已采纳
2回答
我有一个功能组件，我想用模拟函数来测试它(简化的演示)
const remove = () => {
... do something
}
const removeButton = (props) => (
<Button onClick={() => remove()}>
Remove
</Button>
);
我试着用这个测试用例
it('test remove button', () => {
const test = shallow(<removeButton/>)
const m
浏览 0提问于2018-08-09得票数 14
我在一个子组件中使用了useFormContext。这是它的代码： const { register } = useFormContext<CustomerProfileFormData>(); 如何模拟useFormContext以便测试子组件。这就是测试 it('should render properly', () => {
render(<AddressDetails isEdit={false} />);
expect(screen.getByTestId('address-details')).toBe
浏览 106提问于2021-06-30得票数 3
我有一个组件，ComponentDidMount正在尝试调用一个API函数。
componentDidMount(){
this.getTypes(this.props.user).then(Response => {this.setState({List: Response.Types })});
}
async getTypes(userLogin){
try{
res = await API.get(......... );
}
catch(error) {
....
}
}
现在我想调用comp
浏览 0提问于2020-05-28得票数 0
我的组件有多个选择器： import { useSelector } from 'react-redux'
...
const data1 = useSelector(xxxxx)
const data2 = useSelector(yyyyy) 如何正确地模拟测试文件中的每一个？ import { useSelector } from 'react-redux'
jest.mock('react-redux', () => ({
useSelector: jest.fn()
}))
....
useSelector.mockIm
浏览 74提问于2021-01-29得票数 2
回答已采纳
我想在我的测试中测试组件是如何处理this.activatedRoute.paramMap的，没有模拟ActivatedRoute (即使用RouterTestingModule，不使用间谍或模拟)。
在下面的中，我设置了一个非常简单的组件，侦听id路由参数：
@Component({ /* ... */})
export class RoutingExamplesComponent {
constructor(private readonly route: ActivatedRoute, /* ... */) {}
readonly param$ = this.route.para
浏览 0提问于2021-01-26得票数 2
谁能给我解释一下，为什么在测试中不能通过包装器对象访问传入shallowMount的模拟函数，而必须首先创建一个变量作为对模拟函数的引用才能访问？
我已经尝试了mount和shallowMount，创建/挂载了钩子，也尝试了直接调用函数，而不是在创建/挂载的钩子内部调用。
// TestComponent.spec.js
import TestComponent from '@/components/TestComponent'
import { shallowMount, createLocalVue } from '@vue/test-utils'
co
浏览 0提问于2019-08-29得票数 2
为了模拟文件的提交(为了测试目的)，我需要在Controller中向Request.Files添加一个文件。
Request.Files是一个HttpFileCollectionBase，但它似乎不公开向其添加文件的方法。
如何将文件添加到此集合中？
格雷格
浏览 1提问于2014-10-20得票数 1
回答已采纳
1回答
当使用模拟的PatIndex对象对SqlFunctions的IQueryable进行单元测试时，我得到以下错误：
“此函数只能从LINQ实体调用。”。
下面是我如何初始化模拟存储库：
protected void InitUnitOfWork<TEntity>(IEnumerable<TEntity> data)
where TEntity : class
{
var dataSet = Substitute.For<IDbSet<TEntity>, IQueryable<TEntity>>().Initialize(
浏览 1提问于2015-08-25得票数 0
1回答
如何用复杂的逻辑模拟一个反应组件
、、、、
我正在使用第三方的反应组件，这是非常难以测试的。下面是我的组件的一个示例。
import { ThirdPartySelect } from 'thirdPartyComponents'
function Select() {
/* Lots of complicated logic */
...
const [name, changeName] = useState('First Name')
const options = [
'First Name',
'Second Name',
&
浏览 1提问于2020-01-17得票数 0
4回答
如何在茉莉花测试中模拟子组件？
我有MyComponent，它使用MyNavbarComponent和MyToolbarComponent
import {Component} from 'angular2/core';
import {MyNavbarComponent} from './my-navbar.component';
import {MyToolbarComponent} from './my-toolbar.component';
@Component({
selector: 'my-app',
tem
浏览 2提问于2016-03-13得票数 66
回答已采纳
根据我在Dom测试库文档、和中看到的内容，我尝试测试的输入上有一个处理程序。
我的代码的一个不同之处在于，我使用的不是本地状态来控制输入值，而是使用道具。因此，onChange函数实际上是调用另一个函数(也是通过道具接收的)，它将“提升”到另一个组件的状态更新。最终，输入的值被组件作为支柱接收，并且输入值被更新。
我正在嘲弄道具，并试图做一些简单的测试，以证明onChange处理程序正在按预期的方式工作。
我希望在更改处理程序中调用的函数被调用的次数与在测试中使用fireEvent.change的次数相同，这适用于：
const { input } = setup();
fireEvent.c
浏览 1提问于2019-02-01得票数 2
回答已采纳
React hooks提供了使用useEffect模拟生命周期方法componentDidUpdate的可能性，而无需依赖：
useEffect(() => {
// componentDidUpdate
});
如何检测某些道具是否要使用react钩子进行更新？
需要在一些更改之前执行一些代码。
浏览 0提问于2020-05-26得票数 0
1回答
伙计们，这里是最前沿的新闻。试图理解如何正确地将模拟props传递给组件的构造函数.
class MyComponent extends React.Component {
constructor(props) {
super(props);
let dataToDecode = QueryString.parse(props.location.search).data;
const data = QueryString.parse(Base64.decode(dataToDecode));
this.state = {
浏览 7提问于2019-12-31得票数 1
回答已采纳
我正在为HippoCMS的组件编写单元测试，但是我无法解决如何伪造Repository对象来模拟persistFormMap数据。
我遵循了基本的HST-2表单建议来实际检索请求数据()，但是我还没有找到一种简单的方法来模拟/伪造getWritableSession的存储库部分(从persistFormMap()调用)，以放入一个伪造的组件管理器中。
public static Session getWritableSession() throws RepositoryException { if (HstServices.isAvailable()) { Credentials
浏览 0提问于2014-10-02得票数 1
我想知道如何用函数式语言编写好的单元测试。测试非常基本的函数并不难，但我不知道如何测试使用其他函数的函数。
例如：
在面向对象的世界中，我自己测试非常基本的功能，并在测试更复杂的功能时模拟它
class Example {
internal var adder: Adder = AdderImpl()
internal var multiplier: Multiplier = MultiplierImpl()
fun execute(n: Int, m: Int): Int =
if (n < m) adder.add(n, m)
浏览 0提问于2017-12-26得票数 0
我们使用JMockit模拟框架对Spring应用程序进行了单元测试。现在，我们想使用MockK在Kotlin中编写新的测试。几乎所有的东西看起来都工作得很好，但是我们不知道如何模拟Spring自动绑定的bean。在JMockit中，我们使用了@Capturing注解，该注解还在实现模拟接口的类上扩展了模拟。如何在MockK框架中实现与模拟类似的行为？
浏览 2提问于2018-09-02得票数 0
我已经创建了一个模拟FolderBrowseDialog的表单，但添加了一些我想要的功能。它已经过测试并且工作正常，所以现在我想把它变成一个控件。我的问题是，一旦我从UserControl而不是Form继承，我就不再有Close()方法，也不再有FormClosing事件。当我单击OK或Cancel按钮时，如何关闭窗体并将控制权返回给调用对象？
浏览 0提问于2016-10-17得票数 0
2回答
模拟Clojure协议
、、、
像或这样的流行Java模拟框架可以用来模拟用defprotocol定义的Clojure协议吗？如果是这样的话，是怎么做的？
浏览 1提问于2011-04-09得票数 5
回答已采纳
1回答
使用快照进行反应测试
、、、、
我想知道，在使用Jest快照测试React组件时，您的方法是什么？
你在测试每个组件吗？
如何确定是否应为组件创建快照？
您是测试整个视图还是只测试较小的组件(视图段)？
什么时候应该向测试的组件添加道具？函数应该总是使用jest.fn()来模拟吗？
浏览 1提问于2019-09-18得票数 0
回答已采纳
我有一个UIButton子类，它确实覆盖了hitTest方法。我需要测试，在特定的点是否符合我的要求。我打算在单元测试中实现这个实现。
然而，就像一般按钮点击的模拟没有问题一样，我不知道如何在特定的坐标下模拟这个点击。有什么帮助/暗示吗？
浏览 0提问于2016-11-25得票数 0
回答已采纳
我有一个只有一个依赖项的。我将依赖项注入到活动的onCreate中，如下所示：
Dagger_HelloComponent.builder()
.helloModule(new HelloModule(this))
.build()
.initialize(this);
在我的ActivityUnitTestCase中，我想用Mockito模拟覆盖这个依赖项。我假设我需要使用一个特定于测试的模块来提供模拟，但我不知道如何将这个模块添加到对象图中。
在Dagger1.x中，这显然是用完成的
@Before
public void setUp() {
ObjectGra
浏览 4提问于2014-11-14得票数 66
回答已采纳
背景
因此，我试图测试一个调用自定义钩子的，并根据钩子的返回值，该组件将呈现不同的内容。关于一个例子，见下文：
// App.js
import "./styles.css";
import useCustomHook from "./useHook";
export default function App() {
const [state, handler] = useCustomHook();
return state ? <div>state is true</div> : <div>state is f
浏览 22提问于2022-09-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
