Jest mock for react-select或react-Jest library on change不会触发目标更改
Jest是一个流行的JavaScript测试框架，用于编写和运行单元测试。它提供了一套丰富的API和工具，用于模拟和断言函数的行为。在React项目中，可以使用Jest来编写针对React组件的单元测试。
针对你提到的问题，"Jest mock for react-select"和"react-Jest library on change不会触发目标更改"，我将分别给出答案。
- Jest mock for react-select:
- 概念：Jest mock是指在测试过程中模拟（mock）某个模块或函数的行为，以便更好地控制测试环境和结果。
- 分类：Jest提供了多种方式来创建和使用mock，包括手动创建mock函数、模拟模块导入、模拟模块的具体实现等。
- 优势：使用Jest mock可以使测试更加可控，避免依赖外部资源或不稳定的因素对测试结果的影响。
- 应用场景：在React项目中，如果需要测试使用了react-select组件的代码，可以使用Jest mock来模拟react-select的行为，以便更好地测试相关逻辑。
- 推荐的腾讯云相关产品：腾讯云提供了云函数（SCF）服务，可以用于部署和运行JavaScript函数，包括Jest测试代码。您可以使用腾讯云SCF来运行Jest测试用例，以便在云端进行自动化测试。
- 产品介绍链接地址：腾讯云云函数（SCF）
- react-Jest library on change不会触发目标更改：
- 概念：react-Jest library是一个用于在React项目中进行单元测试的库，它提供了一系列工具和API来简化测试的编写和执行。
- 分类：react-Jest library是基于Jest框架的，属于前端开发和测试领域。
- 优势：使用react-Jest library可以方便地编写和运行React组件的单元测试，提高代码质量和可靠性。
- 应用场景：在React项目中，如果遇到onChange事件不触发目标更改的问题，可以使用react-Jest library来编写相关的测试用例，以便定位和解决问题。
- 推荐的腾讯云相关产品：腾讯云提供了云测试（Cloud Test）服务，可以用于自动化测试和性能测试。您可以使用腾讯云云测试来运行react-Jest library的测试用例，以便在云端进行全面的测试。
- 产品介绍链接地址：腾讯云云测试（Cloud Test）
请注意，以上答案仅供参考，具体的解决方案可能因实际情况而异。建议根据具体需求和项目要求选择合适的工具和服务进行测试和开发。
相关·内容
1回答
用Jest模拟库钩子
、、、
设置 我在我的一个组件中使用了一个名为react-firebase-hooks的库。 // Component.tsx
import React, {useEffect} from 'react';
import { Firebase } from '../firebase/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
export const Component = () => {
// Note that Firebase.getAut
浏览 22提问于2021-02-07得票数 0
回答已采纳
我正在学习Jest，反应和实验材料-UI。我编写这个简单的测试只是为了检查事情是如何工作的：
import React from 'react';
import { render, fireEvent, configure} from '@testing-library/react';
import { TextField } from '@material-ui/core';
configure({ testIdAddribute: 'id' });
describe('Testing events', (
浏览 4提问于2020-10-28得票数 1
回答已采纳
我正在尝试模拟react-select组件，无论我做什么，来自react-testing- firevent.change的库似乎只在第一次调用firevent.change时触发。
我想知道为什么更改只触发一次，以及如何修复它。
我的笑话是这样的：
jest.mock("react-select", () => ({ options, value, onChange }) => {
function handleChange(event) {
console.log("called");
const option = opti
浏览 60提问于2020-02-18得票数 7
3回答
如何测试更改组件状态的函数？
、、、、
我有这个组件： // imports
class FiltersModal extends React.Component {
state = {
status: '',
carrier: '',
};
applyFilters = () => {
const { applyFilters } = this.props;
const {
status,
carrier,
} = this.state;
applyFilters({
status,
浏览 24提问于2019-01-24得票数 1
回答已采纳
1回答
我已经看过下面的文章，并且仍然遇到一个问题，接下来的重定向与useNavigate的反应。
创建Post片段
const result = await dispatch(postCreateView(postObj))
if(result){
nav('/posts')
}
测试设置
import {screen, render, fireEvent} from '@testing-library/react'
import { MockComponent } from '../../testMockComponentWrapper'
浏览 8提问于2022-01-28得票数 2
1回答
我有个定制的钩子
import React from 'react';
import { useMessageError } from 'components/Message/UseMessage';
export interface Country {
code: string;
name: string;
}
export default function useCountry(): Array<Country> {
const [countries, setCountries] = React.useState<Count
浏览 9提问于2020-03-29得票数 4
回答已采纳
我正在构建一个具有输入"file“类型元素的React组件。
export default function NavBar() {
return (
<label htmlFor='upload-image' className={classes.label}> Upload </label>
<input type='file'
id='upload-image'
onChange={ (e) => { up
浏览 5提问于2022-01-13得票数 2
回答已采纳
1回答
我正在尝试模拟一个服务类来测试React组件。但是来自jest.mock的模块工厂不工作。
搜索组件：
import React, { useState } from "react";
import SearchService from "../../services/SearchService";
export default function Search() {
const [searchResults, setSearchResults] = useState([]);
function doSearch() {
const serv
浏览 1提问于2021-04-12得票数 0
我正在尝试在react应用程序中设置webpack配置。添加webpack配置的目的是为了避免构建文件的缓存。 用于开发观察者模式和生产最小化构建。 以下是webpack.config.ts const path = require('path')； module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use:
浏览 86提问于2021-10-21得票数 0
1回答
我正在使用Jest为节点应用程序编写单元测试。Node代码使用第三方库来记录信息。
库有一个函数getLogger，您应该调用它来返回一个记录器对象。
我试图模拟对这个库的调用，并在我的单元测试中检测它的调用。节点代码如下：
const logger = require('third-party-libary').getLogger('myModule')
....
function submitSomething() {
....
logger.info('log something')
}
在Jest单元测试中，我试图以许多不同的
浏览 0提问于2019-03-26得票数 3
回答已采纳
我正在运行一个组件的测试，该组件需要检查它是否具有特定的CSS样式。由于在默认情况下不具有此功能，所以我安装了@ test -库/ run本机在那里使用toHaveStyle，但是在运行测试时我得到了一个错误:测试套件无法运行。无法从“我的测试文件的路径”中找到模块‘@ test -library/jest-本机’。下面是我的测试和jest配置：
// test file
import React from 'react';
import {toHaveStyle} from '@testing-library/jest-native';
describe
浏览 19提问于2022-10-31得票数 1
1回答
我正在尝试使用jest测试useDispach。
这是我的组件ItemInput.js
const ItemInput = ({ value, title, action, type, placeholder }) => {
const dispatch = useDispatch();
return (
<div>
<span data-cy="title">{title}</span>
<Input
type={t
浏览 0提问于2020-04-18得票数 0
我正在使用react - the library测试一个react应用程序。要使用renderhooks，我必须添加“@testing library /react-hooks”库。这个库依赖于另一个库"pure.js“。在vscode中运行使用renderhooks的测试运行良好，但在web IDE中显示错误。
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot
浏览 13提问于2021-02-20得票数 0
1回答
我一直试图在Dropdown组件中设置select元素的值，但是测试始终失败。
是要测试的组件的代码框。
it('should execute onChange once and change value to "item2"', () => {
const onChangeMock = jest.fn();
const wrapper = mount(
<Dropdown{ ...args }
onChange={ onChangeMock }
浏览 4提问于2021-11-23得票数 3
我希望在每个测试的基础上更改模拟依赖的实现，方法是扩展默认模拟的行为，并在下一个测试执行时将其还原回原来的实现。
更简单地说，这就是我想要达到的目标：
模拟依赖
在单个测试中更改/扩展模拟实现
当下一次测试执行时，恢复到原来的模拟
我目前正在使用Jest v21。以下是典型的测试结果：
// __mocks__/myModule.js
const myMockedModule = jest.genMockFromModule('../myModule');
myMockedModule.a = jest.fn(() => true);
myMock
浏览 8提问于2018-02-14得票数 210
回答已采纳
2回答
我有一个需要使用navigator.mediaDevices的测试，但是我不能让任何mock正常工作。 我正在使用create-react-app。 这是我的测试： import getConnectedDevices from "./getConnectedDevices";
describe("getConnectedDevices", () => {
it("Should work", () => {
console.log(navigator); // Navigator {}
浏览 24提问于2020-12-09得票数 2
回答已采纳
1回答
我遇到的问题是，在单击submit按钮后，无法测试axios方法是否被调用。
____/axos.js中有以下内容：
const defaultResponse = { data: {} };
const __mock = {
reset() {
Object.assign(__mock.instance, {
get: jest.fn(() => Promise.resolve(defaultResponse)),
put: jest.fn(() => Promise.resolve(defaultResponse)),
post
浏览 8提问于2020-05-08得票数 3
回答已采纳
1回答
我们有一个，在Jest测试中遇到了麻烦：
import React from 'react';
import { render } from '@testing-library/react-native';
import MyScreen from '../../../../../src/screens/MyScreen/index';
import Provider from '../../../../__helpers__/Provider';
import { t } from 'core/utils';
i
浏览 1提问于2021-09-20得票数 1
我正在尝试用jest为“在React中思考”()中显示的示例编写测试。
我很难使用TestUtils.Simulate为搜索输入对象提供一个更改事件。
/** @jsx React.DOM */
jest.dontMock('../ProductTable.js');
jest.dontMock('../FilterableProductTable.js');
jest.dontMock('../SearchBar.js');
var React = require('react/addons');
var TestUtils
浏览 3提问于2014-11-06得票数 3
2回答
上下文
我想测试一个自定义钩子，这取决于@react-native-firebase/dynamic-links。我们使用@testing-library来测试钩子(@testing-library/react-hooks)。
这是我想要测试的钩子(这是一个简化的示例)：
import { useEffect } from 'react';
import dynamicLinks from '@react-native-firebase/dynamic-links';
import { navigateFromBackground } from '../
浏览 5提问于2022-01-14得票数 2
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
1回答
我刚开始测试React，我正在尝试测试当用户更改AsyncSelect组件上的输入值(通过它的onInputChange回调连接)时是否调用了onInputChange。
HotelSelect.js
import React, { useEffect, useState } from 'react';
import HotelSearchApi from '../api/HotelSearchApi';
import AsyncSelect from 'react-select/async';
import './HotelSelect
浏览 2提问于2019-11-16得票数 1
回答已采纳
对于我的Next.JS，我有以下设置
jest.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
// jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
di
浏览 16提问于2022-07-12得票数 0
1回答
我试图暂时模拟一个ESM模块中的节点，同时仍然对原始实现进行重新训练，这样我就可以访问一个真正的端点的值。但是，这个“必须使用导入加载ES模块”的错误。我认识到对ESM的Jest支持仍然悬而未决--在当前节点、ES6和jest的组合中，有什么方法可以让这种行为发生吗？
worker.ts (依赖关系)：
export default async () => {
const response = await fetch("http://example2.org");
return await response.json()
}
main.test.ts：
浏览 6提问于2022-05-25得票数 3
2回答
在jest配置setup.js中，我模拟了两个模块：
jest.mock('somePath1/Translator');
jest.mock('somePath2/Translator');
在运行测试时，我得到这样的结果：
jest-haste-map: duplicate manual mock found:
Module name: Translator
Duplicate Mock path: C:\XXX\dev\YYY\src\components\ZZZ\services\__mocks__\Translator.js
This warn
浏览 5提问于2018-06-22得票数 4
1回答
试过所有的例子，但似乎都没有效果，最有希望的例子是下面的例子，但实际上它也不起作用。我希望实现的是使用除writeZip和updateFile以外的所有常规的writeZip函数，这些函数应该被模仿，并将使用它们的间谍进行检查。
但是目前我得到的错误是admZip.getEntries()不是一个函数，所以我的模拟的actual部分似乎是错误的，有什么提示我如何在模拟中得到实际的getEntries-method吗？
jest.mock('adm-zip', () => {
const actual = jest.requireActual('adm-zip&
浏览 6提问于2022-06-23得票数 0
回答已采纳
我正在尝试模拟react-router上新的history.push钩子中的useHistory，并使用@testing-library/react。我只是模拟了这个模块，就像这里的第一个答案：
因此，我正在做：
//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';
const RouteNotFound = () => {
const history = useHistory();
return (
&l
浏览 1提问于2019-10-23得票数 36
回答已采纳
1回答
我一直在使用尾风2，但我想升级到3。我遵循他们的教程，但没有工作，我不知道为什么。
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,,ts,tsx}",
],
theme: {
extend: {
},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
inde
浏览 3提问于2021-12-22得票数 1
回答已采纳
1回答
使用jest创建模拟对象
、、、
我对jest测试非常陌生。我有下面的实现类 import { ExternalObject } from 'external-library';
export class MyClass {
public createInstance(settings : ISettings) : ExternalObject {
const setting1 = settings.getSetting("setting1");
const setting2 = settings.getSetting("setting2");
r
浏览 27提问于2021-07-27得票数 0
回答已采纳
1回答
我需要测试删除按钮是否存在。文件结构如下： //a.js import b from './b';
const xyz = props => {
const {var1, var2, func1, func2} = b(props);
return(
<Button buttonType='primary'onClick={func1}>Add</Button>
{
var2.length > 0 && <Button buttonType='neg
浏览 23提问于2021-11-15得票数 1
1回答
我正在尝试编写一个单元测试(jest)来测试服务的执行。目前，测试超时，我确信它与我创建读取流的点有关。我模拟s3.getObject.createReadStream()正确吗？ handler.ts const XLSX = require("xlsx");
const AWS = require("aws-sdk");
import { Pool } from "pg";
class Service {
client: any;
workbook: any = "";
constructor(c
浏览 26提问于2021-11-17得票数 0
回答已采纳
1回答
我需要所有的模块功能是自动模拟，除了那些我想要手动模拟。我希望使用jest.mock()的工厂参数来进行此操作，方法是类推来自jest.mock ()的示例，如下所示：
jest.mock('someModule', () => ({
...jest.requireMock('someModule'), // This doesn't work :(
someFunction: jest.fn(() => 'someValue')
}));
我希望jest.requireMock(moduleName)能像jest.r
浏览 5提问于2021-04-28得票数 1
回答已采纳
2回答
不能用Jest模拟反应-本地声音
、、、、
当我尝试用Jest模拟时，我得到以下错误：
//PlayerService.js
import Sound from 'react-native-sound';
try {
console.log('Sound: ' + JSON.stringify(Sound)); //Sound: {}
_trackPlaying = new Sound('path', Sound.LIBRARY, error => { });
} catch (error) {
console.log('error: ' + JSON.
浏览 0提问于2017-11-22得票数 6
回答已采纳
我研究了许多不同的StackOverflow问题，涉及到测试库fireEvent的问题，在每一种情况下，这篇文章似乎都是通过修复处理不好的道具或类似的东西来解决的。
然而，我似乎找不到代码中的任何问题，我想知道这是否是一个配置问题。我希望我的模拟函数已经被调用了，但是它没有被调用，我也不知道为什么。任何帮助都将不胜感激。下面我尽可能地将我的代码简化为一个示例。
Foo.js
import {TextInput} from "react-native";
const Foo = (props) => {
return <TextInput testID={&
浏览 14提问于2022-08-19得票数 0
我试图在我的Jest测试中模拟外部依赖。我的目标是验证依赖项是用一些指定的参数调用的。 依赖项导出一个默认函数，这使得它很难(不可能？)使用jest.SpyOn。 我尝试过使用jest.mock，如下所示： const callback = jest.fn(() => 'output');
jest.mock('dependecy', () => callback);
it('call dep with some args' () => {
...
expect(callback).toBeCalledWit
浏览 11提问于2019-05-13得票数 2
回答已采纳
1回答
我在我的一个小测试项目中有一个简单的组件。这个SearchBar主要由一个文本输入和一个按钮组成，其中按钮单击将执行来自输入字段的文本回调。
我的方法如下所示：
return (
<FormGroup controlId="keywords">
<InputGroup>
<FormControl type="text"
placeholder="Keywords…"
value={this.st
浏览 1提问于2016-12-30得票数 7
1回答
我们正在使用Jest为React组件编写一些单元测试，我遇到了一个我似乎无法理解的问题。我们需要模拟来自导出多个类的第三方库中的单个类。但我们不想嘲笑所有的类，只想嘲笑其中的一个。 // third-party-library
export ClassA;
export ClassB;
export ClassC; // hooks.js
import { useState } from 'react';
import { ClassB } from 'third-party-module';
export const myHook = () => {
浏览 12提问于2019-08-30得票数 1
我有一个动作生成器register.js：
import { REGISTER_SUCCESS, REGISTER_FAIL } from "./types";
import axios from "axios";
export const register = (formData) => async (dispatch) => {
const { name, email, password } = formData;
const configRegister = {
method: "post",
url:
浏览 0提问于2021-01-23得票数 2
回答已采纳
1回答
嘲笑的范围有多大？
、、、
总之，我想知道：
是否包含用于测试文件或影响多个文件的模拟？的作用域是否与JavaScript作用域相同？最内部作用域中的模拟优先于具有相同名称的外部/全局模拟。后续问题可能是:哪些滑稽的模拟方法适用于单元，哪些应用于本地和全局范围？
例如，在以下文件系统中：
rootFolder/
node_modules/
externalModule/
- index.js
__mocks__/
- externalModule.js
src/
- fileA.js
- fileB.js
- internalModule.js
__
浏览 1提问于2020-01-30得票数 19
1回答
没有被调用的模仿函数
、、、
我的组件代码如下所示。不是开玩笑方面的专家。引用了并嘲弄了useHistory.push。但是模拟函数没有被击中。如有任何建议，我将不胜感激
const ReviseAction = ({
plans,
template,
coveragePercentage,
territoryName,
existingTemplateId,
}) => {
const history = useHistory();
const handleRevise = () => {
history.push({
pathname: "/xxx&
浏览 11提问于2022-11-14得票数 0
我想模拟genName函数并测试getMessage函数
moduleA.ts
const getMessage = (): string => {
return `Her name is ${genName()}`;
};
function genName(): string {
return Math.random() > 0.5 ? 'emilie' : 'novaline';
}
export default {
getMessage,
genName
}
下面是我的测试文件：
import moduleA from &#
浏览 0提问于2017-05-25得票数 2
我不知道这为什么突然失效了，但这是我的jest.config.js：
module.exports = {
preset: 'react-native',
verbose: true,
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFiles: ['./jestSetup.js'],
transformIgnorePatterns: [
'
浏览 10提问于2021-03-16得票数 31
回答已采纳
如果我独立运行下面的测试--它们都通过了--如果我一起运行它们，那么用于测试的react屏幕就是第二个测试的最后一个屏幕。(我可以颠倒他们的顺序，这总是第二次考验)。这将导致第一个测试失败。
只有一个测试文件(两个测试都通过)，有测试A，然后测试B(测试B将通过，A将失败)有测试B，然后测试A(测试A将通过，B将失败)
模拟干扰了第二个测试，还是react测试库没有清除它的呈现？为什么会发生这种情况？
代码：
import React from 'react'
import { render, screen } from '@testing-library/react&
浏览 2提问于2020-12-07得票数 1
回答已采纳
我正在使用react-leaflet和react-leaflet-markercluster将React中的leaflet-map转换为钩子。除了MarkerCluster组件的使用之外，一切都运行得很好。应用程序会给出这个错误：Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer> 我尝试做与此代码框中完全相同的事情，包括使用相同版本的包：https://codesandbox.io/s/9binx?file=/src/styles.sc
浏览 76提问于2021-09-29得票数 1
2回答
如何测试苗条输入反应性？
、、、
我编写了一个精巧的组件App，您可以在input中写一个句子，这个句子将在h1中呈现。
App.svelte
<script>
let sentence = "Hello world";
</script>
<main>
<h1>{sentence}</h1>
<input
value={sentence}
type="text"
on:input={(value) => {
sentence = value.target.value
浏览 4提问于2020-08-10得票数 3
回答已采纳
2回答
在我的单元测试(用Typescript编写，由Jest运行)中，我想模拟两个共享公共功能的类。例如，它们都有tick()和getTicks()方法。我的Jest mocks目前复制代码来实现这一点，如下所示： const mock1 = jest.fn(() => {
let ticks = 0;
return {
tick: jest.fn(() => {ticks++; }),
getTicks: jest.fn(() => ticks),
doSomething: jest.fn()
}
});
const mock2 = je
浏览 21提问于2020-01-12得票数 0
回答已采纳
在我想要测试的组件中，我使用useLocation钩子。在我的组成部分中：
function Test() {
const history = useHistory();
const location = useLocation();
const query = new URLSearchParams(location.search).get('value');
return <div > Welcome < /div>
}
为了测试我编写的组件，我编写了这个测试：
jest.mock('react-router-dom'
浏览 7提问于2021-07-04得票数 3
在使用publicRuntimeConfig和Jest运行单元测试用例时，我得到了“next.js未定义”错误
我正在使用下一个9.1.1。我尝试了下面的解决方案，但它不起作用。
I在jest.setup.js also.Please中设置了配置参见下面的代码
从‘next/ config’导入{ setConfig }；从‘./next.config’导入配置；在测试用例文件中尝试使用jest模拟。
jest.mock('next/config'，() => () => ({ publicRuntimeConfig：{ key：'abc }));
浏览 6提问于2019-11-25得票数 10
可以使用jest.mock模拟.env文件吗？或者可能js只适用于常规的js模型(js文件)。 我的tests/test.spec.ts： jest.mock('../.env')
description(...
浏览 32提问于2019-06-18得票数 0
回答已采纳
2回答
在jest中解析标准HTML标记时，测试运行中断。我使用的是巴别塔、Webpack、Jest和React测试库。
我已经安装了以下用于启用jest的包
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.8.3",
"@babel/preset-reac
浏览 35提问于2020-02-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
