在jest单元测试中找不到react组件eventhandler的e.target，尽管将第二个参数传递给了酶的.simulate()
()。
这个问题可能是由于事件模拟不正确或测试环境配置问题导致的。下面是一些可能的解决方案：
- 确保正确模拟事件：在使用酶的.simulate()方法模拟事件时，确保传递正确的事件类型和参数。例如，如果要模拟点击事件，应该使用
simulate('click', { target: { value: 'example' } })来传递事件参数。 - 检查组件是否正确渲染：在进行事件模拟之前，确保组件已经正确渲染并且事件处理程序已经绑定到相应的元素上。可以使用酶的.find()方法来查找组件中的元素，并确保事件处理程序已经正确绑定。
- 检查测试环境配置：有时候，测试环境的配置可能会导致事件处理程序无法正确获取事件对象。确保测试环境中的相关配置正确设置，并且支持React组件的事件处理。
- 检查事件处理程序的实现：确保事件处理程序在组件中正确实现，并且能够正确处理事件对象。可以在事件处理程序中添加一些调试语句，以确保事件对象能够正确传递和访问。
总结起来，要解决在jest单元测试中找不到react组件eventhandler的e.target的问题，需要确保正确模拟事件、组件正确渲染、测试环境配置正确以及事件处理程序的正确实现。如果问题仍然存在，可能需要进一步检查测试代码和相关配置，或者尝试使用其他测试工具或方法进行测试。
相关·内容
我正在用TypeScript构建一个。我在用Jest和酶做成分测试。我也在使用React导航
我很难写单元测试来点击我的按钮。
以下是组件的代码(只是呈现函数)：
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<Button
raised
title={strings.painButtonTitle}
buttonStyle={styles.p
浏览 0提问于2018-10-07得票数 7
回答已采纳
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给Popover的页脚属性的Button触发单击
const React, {Component} from 'react';
const {Popover, Button} from 'slds'; // Any UI library
class My Component extends Component {
render() {
return(
<Popover
footer={
浏览 0提问于2019-08-27得票数 1
我正在使用酶+ jest来测试react，是否有可能在contetnteditable元素上触发onKeyDown事件？
<span id = 'name' contenteditable = 'true'> Editable text </span>
我试过：
result.find('#name').simulate('keyDown', { key: 'm', keyCode: 77, which: 77 });,
但这不起作用。元素含量保持不变。
浏览 3提问于2017-05-03得票数 1
1回答
我有一个容器组件，负责为子表单组件方法提供保存功能。我试着用Jest &酵素(我想我需要酶？)若要测试子组件是否触发从父组件传递的函数，请执行以下操作。这两种方法如下所示：
class Parent extends Component {
handleSave = (someData) => (
/* do some ajax with someData */
)
render() {
return(
<ChildComponent {...this.props} handleSave={this.handleSave} />
浏览 0提问于2016-12-09得票数 1
我对前端开发非常陌生&我在使用Shallow进行酶单元测试时遇到了一些麻烦。基本上，我有像这样的东西
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const {
handleClick,
...other
} = this.props;
return (
浏览 14提问于2019-07-12得票数 2
回答已采纳
1回答
我正在尝试学习酶+ Jest反应组分的测试，我在酶中使用.find方法时出错了。
误差
Method “simulate” is meant to be run on 1 node. 0 found instead.
19 | onAddNew={onAddNew} />);
20 |
> 21 | component.find('button.btn-primary').simulate('click');
|
浏览 0提问于2019-02-03得票数 1
回答已采纳
我是react redux的新手，我正在尝试对FormContainer组件进行单元测试。但我无法使用酶或jest来模拟表单组件上的更改事件。在wrapper.instance()中，我收到了null，但我认为这不应该发生。如果不是，那么测试FormContainer.js文件的正确方法是什么，因为当我运行测试覆盖率时，它向我显示更改函数已被发现。
FormContainer.js
import React, { Component } from "react";
import { connect } from "react-redux";
import For
浏览 0提问于2019-08-12得票数 0
1回答
我有一个父母和一个孩子。
父组件：
const ParentComponent = () => {
const click_button = (role) => {
document.getElementById(role).innerHTML = role;
}
return (
<div>
<ChildButton id= 'button_child' name='button_1' onClick={() => {
浏览 2提问于2021-03-18得票数 0
回答已采纳
我建立了一个组件的反应和材料-UI。我用的是React和Redux。
我的index.jsx如下所示：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/conf
浏览 2提问于2017-04-09得票数 14
回答已采纳
我有一个反应条形图。在barClick上，页面重定向到不同的url。如何使用酶/Jest测试此单击事件？
const handleClick = (params) => {
if(params.data){
let url = get_route(params.value[2])
window.open(url, "_self")
}
return null
};
let onEvents = {'click': handleClick};
<ReactEcharts
option={this.g
浏览 0提问于2020-08-18得票数 0
1回答
仅使用Jest的单元测试链接
、、、、
我想知道是否有办法单独使用jest进行单元测试链接，以确保它们到达正确的位置。我查到的所有其他资源都使用了酶或其他应用程序。
例如:确保<Link to '/homepage>或<NavLink to '/homepage'>真正进入主页。
任何需要阅读的额外资源也将是有益的和值得赞赏的。
浏览 14提问于2021-12-30得票数 1
单元测试返回错误，但当我启动我的应用程序时，一切正常。
问题是，当箭头函数中的callOnSubmitWithData()作为onPress回调返回时，模拟的onSubmit函数不会被调用，但在启动的应用程序中一切正常。
Jest中的单元测试和酶：
const setup = (propOverrides) => {
const props = Object.assign({
fields: [],
error: '',
onSubmit() {}
}, propOverrides);
const wrapper = shallow(
<F
浏览 2提问于2018-06-21得票数 1
我的组件如下
import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'react-bootstrap';
import UserActions from '../../../actions/sampleUserAction';
import UserForm from '../../../views/sample/userForm';
import UsersList from '.
浏览 1提问于2017-12-06得票数 0
回答已采纳
我的应用程序最初在组件中使用加载占位符呈现，5秒后呈现不同的元素。我想用jest和酶来测试这个组件。 我的问题是，当我测试它和console.log(wrapper.debug())时，它只显示加载部分。 现在我的问题是如何对条件部分进行单元测试。 我的App.js import React,{useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [loading,
浏览 13提问于2020-11-17得票数 0
我有onClick函数
private onClick(e: React.MouseEvent<HTMLButtonElement>) {
if (e) {
this.props.log();
}
}
如果onClick有一个事件，我如何使用jest和酶进行测试
it("should not log if has mouse event", () => {
const onClickSpy = jest.fn();
const logSpy = jest.fn();
浏览 3提问于2018-06-19得票数 1
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
我有一个使用的TextField的React组件。我正在使用酶/Jest来编写单元测试。我在更新TextField的值时遇到问题。
我试过使用.simulate('change', { target: { value: 'Input Value'} }。
以下是我的组件的简化版本：
const FeedbackForm = (props: IFeedbackFormProps): JSX.Element => {
const [comments, setComments] = React.useState<string>(''
浏览 6提问于2019-11-09得票数 3
我正在更新一个单元测试，在jest和酶上的一个反应组件，并遇到一个问题。
我最近添加了一个子组件(它本身连接到Redux)到父组件中，它使用的是酶的‘挂载’，单元测试失败了。
注意，该项目编译并运行良好。
这是CLI上的错误：
不变违规:无法在"Connect("ChildComponent名称此处“)的上下文中找到”存储“。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect("ChildComponent名称此处“)。
我已经确认Redux连接的子组件导致了这个问题。
是否可以在此实例中模
浏览 2提问于2019-09-23得票数 2
我用Jest和酶对我的应用程序进行单元测试。我以前是这样测试的：
const textFieldWrapper= shallow(<TextField label="Standard" />);
expect(textFieldWrapper.find('input').length).toEqual(1);
现在，返回的DOM似乎是：
<ContextConsumer>
[function]
</ContextConsumer>
我再也无法访问输入信息了。
我的问题是，如何使用这个新呈现的DOM?来访问输入值？
pac
浏览 0提问于2018-09-19得票数 2
回答已采纳
我正在使用jest和酶来构建这个测试，但是在构建它的时候我遇到了这个错误。
这就是测试
import React from 'react';
import { shallow, render } from 'enzyme';
import Title from './../';
describe('Title', () => {
it('should render correctly', () => {
const TitleDOM = render(<Title />);
浏览 0提问于2017-11-22得票数 4
我正在制作一个javascript单元测试套件，用于一个带有jest &酶法的react redux组件；所讨论的组件是一个文件上传表单，其中包含一些基于用户输入和/或服务器响应的基本样式更改。玩笑和酶都是建立和工作的，我能够成功地编写基本的测试，好的。
我想用jest &酶法模拟用户与这些UI元素(文件输入和文本字段)的交互，但我在这样做时遇到了困难；我对使用这些测试框架相当陌生，对react redux有了基本的理解，我有点不知所措，为了编写有意义的单元测试，我需要确保适当的部分已经就位。
顺便提一下:这个单元测试是在事实发生后进行的，几个月前，我加入了这个项目，使用测试驱
浏览 3提问于2019-04-11得票数 0
1回答
使用酶进行单元测试
、、、、
我的React-Native应用程序中有以下组件。我被要求使用jest和酶来编写单元测试，但我是单元测试的新手。因此，如何分解并编写适当的测试超出了我的能力范围。有人能帮我一下吗？？
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { Button, Loader, ScreenContainer } from '../.
浏览 11提问于2019-07-11得票数 0
1回答
我正在使用酶和jest来测试我的React应用程序，现在我正试图在子组件中触发"onChange“。 class MyComponent extends Component {
state = {
active: null
};
handleChange = panel => (event, active) => {
this.setState({
active: (active ? tabs : null)
});
};
render() {
浏览 7提问于2020-07-24得票数 1
1回答
我有一个React应用程序，我用jest和酶添加了测试。我对一个名为<Duration.jsx />的react组件进行了单元测试。覆盖率显示了<Duration.jsx />和files.scss中的所有组件覆盖率。正常吗？
浏览 14提问于2018-12-19得票数 1
回答已采纳
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
4回答
Jest +酶:试验剩余形式
、、、、
我的应用程序有很多redux表单。我使用Jest和酶进行单元测试。但是，我没有测试redux表单。我的组件是一个登录表单，类似于：
import { login } from './actions';
export class LoginForm extends React.Component<any, any> {
onSubmit(values) {
this.props.login(values, this.props.redirectUrl);
}
render() {
const { handleSubmit, status
浏览 0提问于2018-04-05得票数 8
1回答
我使用Jest和Enzyme进行单元测试。
在我的test.js文件中
let wrapper = mount(<app />
我的测试单击包装器中的一个按钮。
wrapper.find('button').simulate('click')
组件呈现包装器之外的模态。
我需要得到一个模式的参考，以便我可以模拟点击按钮在其中。我可以通过document.body.children获得对模态的参考，但是我不能用它做任何事情。
如何使用酶来测试呈现包装器之外的元素？
浏览 4提问于2017-07-27得票数 2
3回答
我有这个React.js应用程序，是一个简单的购物车应用程序。
问题是，我试图使用Jest和Enzyme对应用程序的状态进行单元测试，但它似乎不起作用。下面是我的Todo.test.js单元测试：
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';
import { configure } from 'enzyme';
import Adapter fr
浏览 1提问于2018-05-08得票数 13
回答已采纳
一切都是最新的
"jest": "^21.1.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
"react-test-renderer": "^16.0.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
我有一个组件和一个类似下面的测试
//component
class ToggleCh
浏览 2提问于2017-12-21得票数 1
在酶中，模拟点击className找到的项目似乎不起作用。问题是mockFn没有模仿toggleSort。但在其他情况下，以这种方式模拟函数可以完美地工作。为什么酶处理mocking类函数的方式不一致？下面所有用于测试事件处理程序toggleSort的情况都不起作用。 import React from "react";
export default class Hello extends React.Component {
toggleSort = e => {
console.log(e, "dd");
};
render()
浏览 24提问于2019-05-01得票数 1
1回答
我正在为一个呈现FlatList的组件编写一些单元测试，我需要模拟一些动作，比如scrollTo和scrollToEnd。
谁知道我怎么才能做到这一点？
我正在使用Jest和Enzyme进行测试。
import React form "react";
import { FlatList } from 'react-native';
import { mount } from 'enzyme';
describe("<FlatList/>", () => {
const callback = jest.fn(
浏览 12提问于2019-08-12得票数 0
1回答
我刚开始使用React-Jest-Enzyme，进行测试，但从我收集到的所有信息来看，在我看来，大多数测试实际上都是测试React库是否坏了，而不是我的实际业务逻辑。
我给你举几个例子，如果我错了，请纠正我：
快照测试：
这个策略是怎么回事？
据我所见，它的主要目的是捕捉代码中任何不必要的更改。它“调整”了我的组件树，只注意到是否添加了新的换行符/字符，对吗？
所以它主要用于那些我可以不小心按下键盘的箱子？或者是别人不小心弄乱了我的代码？
酶的坐骑/浅和Jest‘s
我看到的解释您使用方式的大多数示例如下所示：
const wrapper = mount(<MyComponeny /&g
浏览 1提问于2018-02-21得票数 11
我正在使用酶/Jest来为我的组件上的一个函数编写一个测试，这个测试是通过一个材料菜单图标的onClick触发的。函数作为道具传递给组件。在编写测试时，它会给我模拟点击的错误。
import React from 'react';
import scssstyles from './ToggleSideNavComponent.scss';
class ToggleSideNavComponent extends React.Component {
render() {
return (
<
浏览 0提问于2018-05-10得票数 0
2回答
我正在建立一个应用程序与反应。我隐藏一个文件输入元素(<input type="file"/>)“后面”一个反应引导Button，以便能够控制样式。因此，当单击按钮时，我转过身，在文本输入元素上触发一个合成单击事件，如下所示。
class OpenFileButton extends React.Component {
...
clickHandler() {
this.refs['input'].click();
}
render() {
return (
<ButtonGroup>
浏览 7提问于2017-03-04得票数 2
回答已采纳
2回答
我正在使用React中的功能组件，我需要为功能组件中的方法编写单元测试用例。
import React from 'react';
function print(){
console.log('hello');
}
function Welcome(props){
return <h1>{props.name}</h1>;
}
export default Welcome;
在jest和酶中：
test (method print , ()=> {
const container = shallo
浏览 19提问于2020-06-02得票数 0
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
假设我有一个简单的组件，如下所示。
import React, { useState } from "react";
const Counter = () => {
const [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<>
<p>Counter value is: {counter}</p>
<butto
浏览 0提问于2019-12-25得票数 8
回答已采纳
1回答
酶浅找不到反应自举组分
、、、
下面是使用Redux-forms生成的React组件中的一个标志
const renderInput = ({input,label,type,placeholder}) => {
return (
<div>
<Form.Label>{label}</Form.Label>
<Form.Control type={type} placeholder={placeholder} { ...input}/>
</div>
)
}
export let signInForm = prop
浏览 1提问于2019-03-06得票数 0
我有一个jest/酶测试，它在组件周围创建一个ShallowWrapper，找到一个指定的语义-ui-react (by id)，模拟单击按钮，然后查看单击是否切换了某些内容。
样本JSX：
<Popup
trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
content="Popup Words"
/>
{this.state.showThing &&
<div classNa
浏览 3提问于2017-08-23得票数 2
回答已采纳
我是测试新手，不知道如何测试我的组件，我的onScrollMock不是用下面的代码触发的，我使用的是jest和酶。请帮帮忙。 我也不确定如何接近handleScroll内部的条件，测试覆盖范围指向该函数。 StoryCardList.js const handleScroll = (scrollEvent) => {
const { scrollWidth, scrollLeft, clientWidth } = scrollEvent.target;
const isRightEnd = scrollWidth - scrollLeft === clientWidt
浏览 70提问于2020-01-10得票数 2
回答已采纳
1回答
监视反应子分量法
、、、、
我正试着用玩笑和酶来测试我的反应成分。我有一个使用react-skylight组件的表单组件。当来自服务器的响应成功时，我在表单提交上触发.show()函数。
我现在的考试如下：
import MyForm from './MyForm';
import Popup from 'react-skylight';
describe('<MyForm />', () => {
it('should show popup on success', () => {
const popupS
浏览 7提问于2017-08-23得票数 0
回答已采纳
2回答
如何正确测试反应元件？
、、、、
最近我正在学习用玩笑和酶来进行测试，我的代码似乎很难理解单元测试是什么。
import React from "react";
class App extends React.Component {
constructor() {
super();
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const value = e.target.valu
浏览 0提问于2017-06-30得票数 0
我正在尝试使用jest和酶为react中的容器编写单元测试。我的react代码如下：
AgentForm.js
import {
resetStatusMessage,
formSetError,
formResetError,
createAgent,
updateAgent
} from "../../actions";
componentWillMount = () => {
const {
agents,
match,
push,
resetS
浏览 0提问于2018-01-29得票数 0
1回答
酶只对较低水平的成分起作用吗？
、、、、
我正在为React/Redux/Grommet应用程序编写一些单元测试。为了测试，我使用Jest/酶/Chai/Sinon。
我有以下内容：
import React from 'react'
import FormField from 'grommet/components/FormField'
import Box from 'grommet/components/Box'
import Label from 'grommet/components/Label'
import TextInput from 'gromm
浏览 2提问于2017-03-30得票数 0
回答已采纳
1回答
我试图弄清楚如何在Jest中模拟导入的属性函数。
这是我的组件AboutScreen.js
import React from 'react';
import { Constants, WebBrowser } from 'expo';
import { View, Text } from 'react-native';
const AboutScreen = () => {
return (
<View>
<Text testId={"t-and-c"} onPress={() =>
浏览 1提问于2019-03-20得票数 3
我正试着用Jest和酶来测试反应组分。我想模拟Button组件上的单击事件，该组件位于具有特定类名的div中。我无法检索按钮节点。
组件中有以下标记
<div className="settings">
<Button
onClick={() => this.toggleSettingsModal(true)}
buttonStyle={ButtonStyle.Primary}>
Settings
</Button>
</div>
我试过了
const comp
浏览 0提问于2019-04-01得票数 0
回答已采纳
1回答
我成功地创建了一个函数组件，模拟了useState函数，并获得了对模拟函数的调用。但函数组分保持其初始值。在用新的初始"useState“值进行更新之后，是否根本没有办法创建新的功能组件？
例如，如果我对下面代码中的按钮进行了两次酶模拟(单击)，将在模拟函数中返回两倍的值"1“。
这限制了很多可能的测试。
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>Vous avez cliqué {count} fois<
浏览 1提问于2022-01-04得票数 0
我对测试非常陌生。 假设我有一个下面的组件 export default function ResolutionCount({ componentUsedIn }) {
const dispatch = useDispatch();
const userID = useSelector(
(state) => state.userInfoReducer.userInfo[0]["user_id"]
);
useEffect(() => {
dispatch({
type:
浏览 17提问于2020-09-23得票数 0
1回答
我试图模拟点击按钮，但测试总是失败，我不知道为什么。看来酶无法选择DOM元素来触发对它的单击，因为调用总是0。我用的是酶3.7.0和jest 23.6.0
Button.tsx
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
rende
浏览 0提问于2018-10-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
