如何使用Jest/Enzyme测试React中的keydown事件？
Jest和Enzyme是两个常用的JavaScript测试工具，用于测试React应用程序中的组件。在React中测试keydown事件的方法如下：
- 首先，安装Jest和Enzyme依赖包。可以使用npm或者yarn进行安装。
npm install --save-dev jest enzyme enzyme-adapter-react-16- 创建一个测试文件，命名为
Component.test.js，并导入所需的依赖。
import React from 'react';
import { shallow } from 'enzyme';
import Component from './Component';- 在测试文件中，使用
describe函数定义一个测试套件，并使用it函数定义一个具体的测试用例。
describe('Component', () => {
it('should handle keydown event', () => {
const wrapper = shallow(<Component />);
const event = { key: 'Enter' };
wrapper.find('input').simulate('keydown', event);
// 在这里编写断言，验证组件在接收到keydown事件后的行为
});
});- 运行测试。在命令行中执行以下命令：
npm test这将运行Jest并执行测试文件中的测试用例。
关于Jest和Enzyme的更多详细用法和API，请参考以下链接：
- Jest官方文档：https://jestjs.io/
- Enzyme官方文档：https://enzymejs.github.io/enzyme/
请注意，以上答案中没有提及任何特定的腾讯云产品，因为问题并未要求提供相关产品信息。如需了解腾讯云的云计算产品，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
使用组件进行测试已呈现
reactjs、jestjs、enzyme
我正在使用Jest和酶进行单元测试。我有一个根据媒体类型呈现组件的组件。在单元测试下，我正在检查是否呈现了适当的组件。 我的组件 const getComponent = {
'image': ImageComp,
'video': VideoComp,
'other': DocumentComp
}
const MediaDisplay = (props) => {
let { assetInfo } = props;
let source = assetInfo.assetUrl;
const
浏览 19提问于2020-04-07得票数 0
2回答
shallowWrapper是空的，测试快照Jest/酶？
javascript、testing、jestjs、enzyme、enzyme-to-snapshot
我不知道在运行快照测试时为什么会得到空的shallowWrapper对象，我使用的是Jest和
我在App.test.js.snap文件中得到了什么：
// Jest Snapshot v1, "goo.gl/fbAQLP"
exports[`renders App component 1`] = `ShallowWrapper {}`;
我的package.json文件：
{
"name": "test",
"version": "0.1.0",
"private": true,
浏览 4提问于2020-09-22得票数 2
回答已采纳
2回答
酶模拟改变输入不改变React钩子上的值
reactjs、unit-testing、jestjs、react-hooks、enzyme
我正在尝试用React上的Jest和Enzyme来写测试。但是在调用.simulate('change')函数时，值保持为NULL，并且不会更改为期望值miqueias@gmail.com。我的App.jsx： const App = () => {
const [username, setUsername] = React.useState(null);
const [password, setPassword] = React.useState(null);
const handleChange = (event) => {
浏览 30提问于2020-08-23得票数 0
1回答
带有React上下文API的Jest &酶测试错误
reactjs、jestjs、enzyme
我正在测试一个反应应用与Jest &酶。当我运行npm run test时，我在UserContext.jsx中得到了在MainPage.jsx中导入的错误。我怎么才能解决呢？
错误消息
不变违反:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
11 | };
12 |
> 13 | export const useUserValue = () => useContext(Us
浏览 0提问于2020-09-05得票数 1
回答已采纳
1回答
当使用React组件的代理时，查找失败
reactjs、jestjs、enzyme
描述了在我的应用程序中代理某些组件所需要的bug。它们正确地呈现，但我无法运行测试，因为enzime正在抛出消息Method “simulate” is only meant to be run on a single node. 0 found instead.
复制
只需创建并运行这个简单的测试
import * as React from "react"
import { shallow, configure } from "enzyme"
import * as Adapter from "enzyme-adapter-react-16"
浏览 1提问于2018-08-17得票数 3
回答已采纳
1回答
哪个单元测试设置是正确的？这两个测试是否都在检查函数是否正确以及是否正常工作？
javascript、reactjs、unit-testing
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'e
浏览 42提问于2019-01-02得票数 0
1回答
在jest中浅层和渲染有什么区别？
javascript、reactjs、testing、jestjs
说真的，从酶中使用浅层和渲染有什么不同？ 下面是这两者的一个示例： 使用浅层测试渲染： import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
浏览 10提问于2019-01-17得票数 0
回答已采纳
3回答
Jest遇到了一个意外的令牌ReactJS
reactjs、jestjs、babeljs、enzyme、babel-jest
我已经在我的react项目中设置了以下环境。以下是package.json文件：
{
"name": "testing",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.5
浏览 0提问于2018-10-17得票数 5
回答已采纳
2回答
嘲笑模拟全局变量的方法
javascript、reactjs、testing、jestjs
在我的应用程序中，外部文件中有一个全局变量。
const Translate = {
trans: () => {... some code}
}
我在我的反应组件中使用它
const title = Translate.trans('title');
在我的Component.test.js里
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import A
浏览 5提问于2017-11-21得票数 1
1回答
挂载()失败，因为目标容器不是dom元素
reactjs、unit-testing、jestjs、enzyme
我收到了错误消息Target container is not a DOM element。利用webpack。
全错误：
FAIL src/App.test.js
● Test suite failed to run
Invariant Violation: Target container is not a DOM element.
at invariant (node_modules/fbjs/lib/invariant.js:42:15)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/re
浏览 0提问于2018-08-10得票数 1
回答已采纳
1回答
用className查找酶并模拟点击
reactjs、enzyme
在酶中，模拟点击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回答
如何修复这个Jest错误：“组件遇到声明异常”？
javascript、reactjs、jestjs、enzyme
我正在尝试使用Jest和Enzyme测试React组件。目前我的测试非常简单，我只是想确保组件能够挂载： import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './App';
Enzyme.configure({
adapter: new EnzymeAdapter()
});
describe(&#
浏览 9提问于2019-03-21得票数 6
回答已采纳
1回答
React & Enzyme:为什么beforeEach()不工作？
reactjs、testing、jestjs、enzyme
我正在编写我的第一个React测试，结果遇到了beforeEach语句无法工作的问题。下面是我的测试文件：
import React from 'react';
import { shallow } from 'enzyme';
import Home from '../components/Home';
import IntroText from '../components/IntroText';
import Form from '../components/Form';
describe('<
浏览 2提问于2017-02-19得票数 21
回答已采纳
1回答
TypeError: wrapper.props(.).onClick不是函数
javascript、reactjs、jestjs、enzyme
Foo.jsx
import React from 'react';
export default (props) => {
const { func } = props;
return (
<>
<button onClick={() => func()}>Click</button>
</>
);
};
Foo.test.js
import React from 'react';
import Enzyme, { shallow } from
浏览 2提问于2020-07-03得票数 1
1回答
如何测试从mapDispatchToProps传入的函数(React/Redux/Enzyme/Jest)
reactjs、redux、jestjs、enzyme
我想测试一下，当模拟按钮单击时，是否调用了从mapDispatchToProps传递的函数。
如何测试从mapDispatchToProps传入的函数是否被调用？
我试图通过props传递一个模拟的函数，但它不起作用。任何帮助都将不胜感激。
下面是我的伪类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
浏览 10提问于2018-08-29得票数 8
2回答
在react组件上开玩笑错误意外令牌
reactjs、jestjs、babel-jest
在运行React Component Name时，我在npm test上得到了意想不到的令牌。试着阅读了其他几个类似的问题，但似乎没有一个对我有帮助。我在下面添加了babelrc、package.json和我的测试文件内容。
<!-- content of .babelrc file -->
{ "presets": ["env"] }
<!-- content of package.son file -->
"dependencies": {
"react": "^16
浏览 0提问于2018-03-21得票数 5
回答已采纳
1回答
反应，Jest，酶如何通过App.js测试与存储残存
reactjs、redux、enzyme、jestjs
使用create-react-app创建了一个简单的应用程序，然后更新了我的App.js并添加了redux/store。
class App extends Component {
render() {
return (
<header className="header">
<h1>todos</h1>
</header>
);
}
}
function mapStateToProps(state) {
return {
data: state.d
浏览 0提问于2018-03-19得票数 4
回答已采纳
1回答
安装Jest24.1时spyOn无法工作
reactjs、jestjs
在我的package.json中，我有jest 24.1.0，但我的测试告诉我 "TypeError：_jest.default.spyOn不是函数“ Jest文档说spyOn是一个我可以使用的方法，但不知何故它对我来说是不可用的。我做错了什么？ https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname 这是我的测试。 import React from 'react';
import jest from 'jest';
import Enzyme, { shallow } fro
浏览 13提问于2019-02-18得票数 0
3回答
物料UI +酶检测组件
reactjs、jestjs、material-ui、enzyme
我在React中有一个组件，我正在尝试用Jest测试它，不幸的是测试没有通过。
组件代码：
import React, {Component} from 'react';
import ProductItem from '../ProductItem/ProductItem';
import AppBar from "@material-ui/core/es/AppBar/AppBar";
import Tabs from "@material-ui/core/es/Tabs/Tabs";
import Tab from "
浏览 4提问于2018-06-19得票数 13
4回答
酶法:方法“text”只能在单个节点上运行。0找到
reactjs、jestjs、enzyme
我用的是React v15.4，babel-jest v18和酵素v2.5.1
我有一个简单的反应组件：
import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'
class About extends Component {
浏览 6提问于2017-03-28得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
