Jest侦察自定义钩子内的函数
Jest是一个用于JavaScript代码测试的开源框架。它提供了一套简单而强大的API，用于编写测试用例、运行测试并生成测试报告。Jest侦察自定义钩子内的函数是指在测试过程中，Jest可以监测和跟踪自定义钩子函数内部的函数调用情况。
在测试中，钩子函数是在测试用例执行前或执行后执行的函数。它们可以用来设置测试环境、准备测试数据或清理测试数据等。自定义钩子函数是开发者根据自己的需求定义的特定钩子函数。
Jest可以通过mock函数来模拟自定义钩子内部的函数调用。通过使用Jest提供的mock函数，我们可以创建一个虚拟的函数，用于替代自定义钩子内部的函数。这样，在测试过程中，我们可以监测该虚拟函数的调用情况，包括被调用的次数、传入的参数等。
使用Jest侦察自定义钩子内的函数可以帮助我们验证自定义钩子的正确性和可靠性。通过监测自定义钩子内部函数的调用情况，我们可以确保自定义钩子在正确的时机执行了所需的函数，并且传入了正确的参数。
对于Jest侦察自定义钩子内的函数，腾讯云提供了一系列与测试相关的产品和服务。例如，腾讯云提供了云测试（Cloud Test）服务，可以帮助开发者进行自动化测试、性能测试和安全测试等。此外，腾讯云还提供了云开发（Cloud Development）服务，可以帮助开发者进行持续集成和持续交付，提高开发效率和质量。
更多关于腾讯云测试和云开发相关产品的信息，可以参考以下链接：
- 腾讯云测试产品介绍：https://cloud.tencent.com/product/ct
- 腾讯云云开发产品介绍：https://cloud.tencent.com/product/scf
请注意，以上答案仅供参考，具体的产品选择和推荐应根据实际需求和情况进行评估。
相关·内容
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';
class App extends React.Component {
render() {
Playground
浏览 2提问于2019-03-09得票数 0
回答已采纳
因此，我有一个简单的快速路由，我正在尝试使用Jest进行测试。下面是代码片段 auth.route.ts import * as authController from '../controllers/auth.controller';
const router = express.Router();
// POST /api/user/register
router.post(`${userApis.register}`, authController.register);
export { router }; auth.route.test.ts it('re
浏览 14提问于2021-01-28得票数 2
回答已采纳
我有一个名为useInitialSetup的自定义钩子，它返回键值字典对象。它是在App.tsx中消耗的。
在App.test.tsx中，我有一套使用Jest和编写的单元测试。
是否可以仅在所选的单元测试中模拟useInitialSetup ，而不是全部？
下面是我在App.test.tsx中尝试过的：
jest.mock('../../hooks/useInitialSetup', () => {
return jest.fn(() => ({
loading: mockLoading,
suspendedTrial: mockSuspende
浏览 3提问于2021-04-22得票数 0
回答已采纳
1回答
我有一个HoC，它接受组件的集合，并将它们包装在一个div中，这使得它们基本上是可滑动的。代码在浏览器中运行良好，但jest测试失败，并且智能感知显示使用useEffect的警告 import React,{useEffect} from "react";
export const swiper = (components) => {
const swiperHoc = props => {
useEffect(()=>{console.log('HocLogged')})
return <div>{comp
浏览 18提问于2020-02-02得票数 0
2回答
我有一个基于选项卡的页面。每个选项卡都会带有标签，以便在单击时切换选项卡。我在该州的setValue中添加了useEffect。 PageManager文件： const RolePageManager = () => {
let location = useLocation()
let { uuid } = useParams()
const [tabIndex, setTabIndex] = useState(0)
useEffect(() => {
if (location.hash) {
switch (location.hash) {
case &
浏览 29提问于2020-08-06得票数 0
在文档上有一个例子。
我对waitForNextUpdate是如何工作的感到困惑。我制作了两个测试用例来比较waitForNextUpdate和act() + jest.advanceTimersByTime()。
index.ts
import { useState, useCallback } from 'react';
export function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () =>
浏览 3提问于2021-11-15得票数 8
如何测试用于向组件属性提供组件的匿名函数？如果我们不能通过jest测试匿名函数，那么应该采取什么方法呢？ <BrowserRouter>
<Switch>
<Route path={routerPath1} component={props => <MyComponent1 {...props} customProperty={BlaBlaBla} />
<Route path={routerPath2} component={props => <MyComponent2 {...pro
浏览 8提问于2019-02-07得票数 1
回答已采纳
我正在尝试使用jest测试一个模块。在这个模块中，我有一个函数，它作为另外两个函数的前端，并根据它的参数委托给它们。我正在尝试弄清楚这些函数是否确实被调用过。
我曾尝试使用间谍函数，但从未调用过它。相反，实际的函数被调用，绕过了我的间谍。
我发现的所有关于模拟和间谍的例子都涉及到模拟和监视另一个模块，而不是被测试的那个模块，但在这种情况下，我试图从被测试的模块中监视一个函数。这有可能吗？有没有更好的方法来做这件事？
示例代码：
// funcs.js
const decide = obj => {
if (obj.a !== undefined) {
return func
浏览 13提问于2020-05-31得票数 3
回答已采纳
在js文件中 import { bindActionCreators } from "redux";
const mapDispatchToProps = dispatch => {
const MyActions = bindActionCreators(MyActions, dispatch);
return {
actions: {
method1: () => {
MyActions.myActionMethod();
},
} 现在我想测试一下调用method1是否会调度MyActions.my
浏览 25提问于2020-03-24得票数 2
回答已采纳
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
1回答
假设我们有一个名为useUser的自定义钩子
const useUser = (): IUser => useContext(MiniAppContext).user;
然后在另一个组件中使用它。
import { useUser } from '@ABC'
const { monitoring } = useUser(); // please note that monitoring is an object having property id
当我们运行测试用例时，它显示
TypeError: xxxx.useUser is not a function
我用下面
浏览 3提问于2022-02-19得票数 1
回答已采纳
1回答
我正在试图找出如何编写一个类型记录/反应应用程序，该应用程序使用与服务器以及其他客户进行通信。但是，我想在这样做时编写一些测试。
在我的示例应用程序中：
import io, { Socket } from 'socket.io-client';
const App = () => {
let socket: Socket;
const ENDPOINT = 'localhost:5000';
const join = (event: React.MouseEvent<HTMLA
浏览 13提问于2022-04-12得票数 0
回答已采纳
我是Jest测试环境的新手。我需要为三个函数编写测试用例，这些函数没有返回任何值，但它们需要两个数值？
如何测试这些函数？有人能帮帮我吗？
const app = function () {
let buttons = numbers;
for (let i = 1; i <= buttons.length; i++) {
Buttons(buttons, i);
}
};
const Buttons = (buttons, i) => {
let div = document.getElementById("main");
let b
浏览 0提问于2020-07-23得票数 0
2回答
在单元测试React组件时，我需要模拟我的自定义钩子。对于这个简单的任务，我已经阅读了一些教程和stackoverflow答案，但没有幸运地正确实现它。 我对单项测试最简单的设置如下： // TestComponent.js
import React from "react";
import useTest from "./useTest";
const TestComponent = () => {
const { state } = useTest("initial_value");
return <div>
浏览 37提问于2020-12-13得票数 7
回答已采纳
给定一个如下所示的自定义钩子： const getSavedInfo (id) => {
const endpoint = getEndpoint(id)
const {updateInfo} = React.useContext(infoContext)
axios.get(endpoint).then((res) => {
if (res) {
updateInfo(res.data)
}
})
} 我该如何正确地模拟updateInfo方法，以确保它在jest测试中被调用？
浏览 30提问于2020-12-28得票数 0
1回答
有一个带有spring 1.5的微服务，它使用假装与其他服务进行通信，还有一个通过假装封装所有调用并发送跟踪到zipkin服务器的。问题是，我不想包装所有的电话和跟踪他们，只有几个最重要的，这样做。如何从跟踪或导出整个虚拟客户端(接口)中排除一些带有假名的调用(方法)？
浏览 1提问于2018-03-12得票数 0
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
2回答
在SpringBoot 3.0.0-M1和SpringCloud 2022.0.0-M1这两个令人兴奋的版本之后，我继续推进版本的升级。
虽然在我的SpringBoot 2.6.3 + Jubilee上一切都很好，但是代码完全相同，只是pom文件上的版本更改为新的SpringBoot 3.0.0-M1 + SpringCloud 2022.0.0-M1，下面的错误是观察到的。
/Library/Java/JavaVirtualMachines/jdk-17.0.2.jdk/Contents/Home/bin/java -Dmaven.multiModuleProjectDirectory=
浏览 22提问于2022-02-03得票数 1
回答已采纳
我有一个如下所示的自定义React钩子文件(包含多个钩子函数)，我希望模拟由其中一个钩子返回的handleSubmit
// useHook.js
export function useFirstHook() {
// calling useStates...
const [ state, setState ] = useState('')
const handleSubmit = () => {}
return [ state, {handleSubmit}]
}
export function useSecondHook() { ... }
e
浏览 3提问于2022-08-23得票数 0
回答已采纳
为一个依赖于很多钩子的页面编写测试，而我对测试代码不是很有经验。最重要的是，更少的经验嘲弄所涉及的钩子(useSelector，useEffect等)，页面将从屏幕底部衍生出一个抽屉来选择选项。当抽屉关闭时，我的测试失败了，错误为"TypeError:无法读取未定义的属性‘破坏’“，并指向Material使用的makeStyles钩子以定义样式规则，但它确实看起来像主题提供程序提供了样式规则，因此我不确定问题。如果有人有洞察力的话需要帮助。
import { Provider, useSelector } from 'react-redux';
import thunk
浏览 2提问于2020-07-15得票数 0
我试图在我的created钩子中模拟一个setInterval，但是无论我怎么尝试，这个函数都不会被调用。到目前为止，我所做的是使用jest.useFakeTimers，并且在每个测试中，我将使用jest.advanceTimersByTime(8000)来检查我的api是否被调用。如果您有任何意见/帮助，我将不胜感激。谢谢
我的vue文件
created() {
setInterval(() => this.checkStatus(), 8000)
},
methods: {
async checkStatus() {
let activated
浏览 1提问于2020-09-14得票数 0
我有一个vue子组件： <NavbarSnap
title="Select Recipient"
data-testid="navbarsnap"
v-on:change-screen-handler="onHandleChangeScreen('SnapRecepient')"
:hasSearch="true"
:hasInvite="true"
:groupName="getSelectedChan
浏览 22提问于2020-08-22得票数 1
回答已采纳
我正在尝试用React Testing Library和Jest编写一个测试。但是，我得到了一个TypeError: translate is not a function错误。按照React Admin Documentation的建议，我使用了useTranslate钩子。在测试中，我使用jest.mock函数模拟'react-admin‘包，目前测试所做的就是检查组件是否呈现。所有依赖项都已更新。 现在，测试在带有useTranslate钩子的translate常量上阻塞。我试着用和useTranslate一样的方法将translate添加到jest.mock中，但没有成功。我
浏览 60提问于2021-03-29得票数 1
我尝试的是使用useHistory和useLocation为React组件编写一个测试，如下所示：
import { useHistory, useLocation } from 'react-router-dom';
export function MyComponent() {
let location = useLocation();
let history = useHistory();
function changeUrl(param) {
// some logic here
if(foo) {
history.pus
浏览 7提问于2021-11-21得票数 0
回答已采纳
在将Jest作为断言库的WebdriverIO框架中，are ()和beforeAll()没有得到认可。
对于一个ReactNative项目，我们正在使用webdriver.IO+mocha构建UI自动化。作为其ReactNative，因此主项目代码库已经在项目中构建了一个广泛的Jest库。
依赖关系：
"jest": "23.6.0",
"jest-junit": "^5.2.0",
"jest-matchers": "^20.0.3",
"jest-transform-stub"
浏览 0提问于2019-02-06得票数 0
回答已采纳
我正在尝试测试custom hook。我想知道是不是setState函数触发。这是我的自定义钩子
import React from "react";
import axios from "axios";
export default () => {
const [state, setState] = React.useState([]);
const fetchData = async () => {
const res = await axios.get("https://5os4e.csb.app/data.json&
浏览 0提问于2020-07-25得票数 0
我有一个这样的Vue页面：
<template>
</template>
<script>
created(){
this.doSomething();
}
methods: {
doSomething() {
.....
}
}
</script>
现在，我们要测试这个创建的钩子，并检查是否调用了doSomething()方法。
像这样尝试，jest也会被导入到package.json中
import {
shallowMount,
createLocalVue,
} from '@
浏览 1提问于2019-05-09得票数 12
我正在尝试理解Jest的异步测试。
我的模块有一个函数，它接受一个布尔值并返回值的承诺。executer函数调用setTimeout，在timed out回调中，promise根据最初提供的布尔值进行解析或拒绝。代码如下所示：
const withPromises = (passes) => new Promise((resolve, reject) => {
const act = () => {
console.log(`in the timout callback, passed ${passes}`)
if(passes) resolv
浏览 2提问于2017-10-12得票数 18
回答已采纳
3回答
我开始学习更多关于使用Jest和测试库测试React组件的知识。我使用模拟API返回用户数据并在测试中呈现它，并希望在第二个API调用中返回user_active = true和user_active = false。
这是我在模拟文件夹中模拟getUsers API的代码：
"use strict";
module.exports = {
getUsers: () => {
return Promise.resolve({
data: {
id: 27,
full_name: "john doe",
浏览 0提问于2020-07-07得票数 1
回答已采纳
2回答
为了提高我的反应技能，我一直在尝试构建一个可重用的表单状态钩子和表单验证器。我的自定义钩子FormState使用空字符串初始化一个对象，该对象的值将用作钩子的初始状态。我写了一个函数，clearInputs，我希望将我的输入重置为它们的初始状态，但它无法更新。
我到处寻找答案，甚至参考了Stack Overflow的帖子：。还是没有骰子。
// MY FORMSTATE HOOK
import { useState } from 'react';
const FormState = props => {
let initialState = { ...props
浏览 0提问于2019-03-28得票数 4
我有一个自定义钩子，它使用react-router-dom的useNavigate钩子。我只想添加一个测试，用于检查是否将期望值传递给了钩子。钩子只是在URL中存储和检索查询参数的值。 这是我的自定义钩子的样子- import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSearchParam } from 'react-use';
// Default value for the tokens
export co
浏览 82提问于2021-04-05得票数 0
回答已采纳
我有一个使用ref.current.offsetWidth的响应组件，但当我用Jest测试它时，它不能工作 导航栏组件在localhost中工作并呈现良好。但是当我尝试使用Jest来模拟不同的屏幕宽度进行单元测试时，由于某些原因，ref钩子无法获得div长度。对如何解决这个问题有什么建议吗？ 错误：TypeError: Cannot read property 'offsetWidth' of undefined 代码: Navbar.js // custom hook to get live div width
const useContainerDimensions =
浏览 126提问于2020-08-22得票数 1
回答已采纳
我使用一个自定义钩子来共享一个increment函数，这占用了我的应用程序(它增加了购物车中的数量)。
这一职能是干什么的：
cacheincrements 从React查询useMutation获取数据对象数据quantity属性通过React查询useMutation进行一些API调用，然后在成功的情况下更新React查询缓存
之后，组件将读取缓存，并使用新的quantity更新UI。
钩子完成工作，最后缓存按预期更新。
现在，我尝试测试组件中的钩子，以检查UI是否相应更新。
API调用使用msw进行模拟。它的返回值用于更新缓存：
rest.put(`${api}/carts/1`,
浏览 6提问于2022-06-30得票数 0
回答已采纳
1回答
我想在Class组件中重新定义一个函数/方法，因为我想重用它。
我试过了
ClassComponent.prototype.submitForm = async () => {
...
}
但没那么走运。
在Jest中，可以这样做
jest.spyOn(class.prototype, 'method').mockImplementation
若要更改方法的实现，请执行以下操作。但我想在React中实现。有没有办法做到这一点？我需要更改该方法，以便能够完全重用我的组件。谢谢
浏览 0提问于2021-06-23得票数 0
如果您有一个React组件，它调用一个获取数据的自定义钩子，那么在测试React组件时，模拟这个内部自定义钩子结果的最佳方法是什么？我看到两种主要方法：
1) Jest.mock自定义钩子。这似乎是最推荐的方法，但它似乎需要测试有更多的内部实现细节的知识，以及它可能需要比组件的道具接口所建议的更多的知识(假设使用支持类型或TypeScript)。
2)使用依赖注入方法。将钩子声明为支柱，但默认为真正的挂钩，这样您就不必在呈现组件的任何地方设置它，而是允许使用模拟覆盖测试。下面是一个带有模拟自定义钩子的测试的人为代码框示例：
2需要更多的输入，但似乎更容易用于测试。但是，测试必须了解组件的内部
浏览 3提问于2019-06-07得票数 20
回答已采纳
1回答
我正在尝试为useEffect react钩子编写Jest-enzyme测试用例，我真的迷路了，我想为2个react钩子写测试用例，一个进行异步调用，另一个使用usestate钩子对数据进行排序和设置，我的文件在这里。
导出常量数据集: React.FC = ({id，DatasetTable，setDataset，datasetError，setDataSetError}) => { const sortedDataset，setSortedDataset = useState()；
useEffect(() => {
fetchRegistryFunction({
浏览 6提问于2019-11-25得票数 0
我有一个使用useHistory钩子的组件。
在编写单元测试时，我模拟了react-route-dom模块，以便在要测试的组件中正确模拟useHistory钩子。
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: 'home',
},
}),
}));
但是，在其中一个测试(名为testB)中，我希
浏览 1提问于2020-06-03得票数 1
我有很多调用dispatch() (Redux)的功能React组件。dispatch()函数本身是由react-redux的useDispatch()钩子传入的。
作为一个简化的例子：
const LogoutButton: FC = () => {
const dispatch: Dispatch = useDispatch();
return (
<button onClick={() => {
console.log("Clicked...") // To check that onClick() simulation i
浏览 3提问于2020-06-25得票数 4
回答已采纳
2回答
我已经写了一个插件，它将把帖子转换成excel格式，然后用电子邮件将.xls发送到电子邮件id。我可以让它在functions.php中声明函数时使用，但不能处理插件文件中定义的函数。
if ( ! wp_next_scheduled( 'xls_func_hook1' ) ) {
wp_schedule_event( time(), 'hourly', 'xls_func_hook1' );
}
add_action( 'xls_func_hook1', 'sendxls1' ); //senxls1 is
浏览 0提问于2012-08-09得票数 1
1回答
我一直在尝试模拟一个在另一个文件中导入并在类中使用的函数。这里有类似的问题，我检查了很多问题，但仍然无法让我的测试正常工作。下面是我的代码结构：
//util.js
export const stageHelper = (key) => {
return STAGE_NAMES[key];
};
//main.js
import {stageHelper} from './util'
class Main {
static config = {
value: stageHelper('abc'),
}
浏览 4提问于2021-04-16得票数 1
jest模拟函数文档()使用.mock.calls.length属性显示关于间谍的断言。它们之间的区别是什么
const myFunc = jest.fn()
myFunc();
expect(myFunc.mock.calls.length).toBe(1)
和
const myFunc = jest.fn()
myFunc();
expect(myFunc).toHaveBeenCalledTimes(1)
只是糖吗？用户应该在什么时候使用mock对象？
浏览 1提问于2019-01-10得票数 1
我有两个javascript A和B函数，定义如下，并通过另一个名为API的函数公开，如下所示，我想测试函数A，看看它是否调用了B。
function A () {
B()
}
function B () {
console.log('B is called')
}
export function API (){
return {
a: A,
b: B
}
}
我尝试我的测试函数的方式如下所示，它们不起作用。
import { API } from './actions-beta'
describe('test A&
浏览 0提问于2018-10-26得票数 0
1回答
我试图构建一个简单的导航条，但是当我在useEffect中定义一个useEffect函数时，呈现的错误比预期的要少。这可能是意外的早期返回语句造成的。我看了同样的答案，但直到无法修复
这是我的代码
import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/M
浏览 3提问于2021-02-05得票数 0
回答已采纳
2回答
我有一个简单的登录组件和一个MobX存储，它应该保存一些用户信息。我想用Jest测试这个集成。这个应用程序是用创建的，所以我只是在为我的测试构建这个应用程序。
我的登录组件如下所示：
const Login = () => {
const { accountStore, userStore } = useStores();
const { user } = userStore;
return(
<>
{user ?
<>
<
浏览 6提问于2021-06-10得票数 0
1回答
我有一个想要测试的功能组件，我使用scroll position钩子(plugin @n8tb1t/ use -scroll-position)通过传递回调参数来获取Y。但是我发现我的测试没有覆盖滚动位置钩子的回调。 import { useState } from 'react';
import { useScrollPosition } from '@n8tb1t/use-scroll-position';
const Scroll = (): JSX.Element => {
const [y, setY] = useState(0);
浏览 52提问于2021-05-11得票数 0
回答已采纳
我有一个反应无状态函数组件(证监会)。我希望用户点击一个按钮，点击一个http呼叫将从证监会发出，当收到回应时，我想打开一个模式。用证监会是否可以做到呢？还是我需要保留一个有状态组件？
这是我的代码，它在加载时进行http调用，然后onClick打开模式。但我希望这两件事都能在onClick事件上依次发生。
//HTTP CALL FUNCTION
function httpListCall(url) {
const [list, setData] = React.useState(null);
const [error, setError] = React.useState(
浏览 1提问于2019-07-25得票数 1
回答已采纳
我试着用Jest +酶测试useState和useEffect的反应钩子，但是我找不到方法，有人能帮忙吗？
const [sPlaceholder, setSPlaceholder] = useState('');
useEffect(() => {
setSPlaceholder('abcd');
if (s === '') {
dispatchUpdateSPlaceholder(searchPlaceholder);
}
}, [sPlaceholder]);
浏览 1提问于2019-05-09得票数 4
回答已采纳
我开发谷歌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
回答已采纳
我正在尝试模拟showAllElements函数，以查看我的setElements状态是否设置正确。下面是react的代码片段。 function functionalComponent(){
const [elements, setElements] = React.useState([{"isHidden": true}]);
function showAllElements() {
setElements((elements) =>
elements.map((element) => {
elemen
浏览 24提问于2021-08-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
