enzyme

首页 > TAG信息列表 > enzyme

react-enzyme

目录简介安装及配置enzyme 渲染方式shallow()render()mount()enzyme 常用的测试函数简介 Enzyme是由Airbnb开源的一个React的JavaScript测试工具，使React组件的输出更加容易extrapolate 。Enzyme的API和jQuery操作DOM一样灵活易用，因为它使用的是cheerio库来解析虚拟DOM，而cheerio的

React 测试利器之 Enzyme

一. 简述点赞收藏分享文章举报绿足发布了85 篇原创文章 · 获赞 29 · 访问量 3万+ 私信关注

javascript-jQuery不适用于jsdom / enzyme

我有一个包含以下组件的最低测试React应用： import React from 'react'; import $from 'jquery'; export default class App extends React.Component { componentDidMount() { console.log('componentDidMount', $('#helloDiv').length

javascript-使用React,Enzyme,Jest测试嵌套div中是否存在特定链接

我在侧边栏,标题等中渲染了一些链接.我正在编写一些测试以确保它们存在,得到渲染等.一切正常. 我想确保使用正确的位置链接在正确的div中呈现链接. 标头组件示例 <div className="pull-right" id="navbarsExampleDefault"> <ul className="navbar-nav mr-auto">

创建用于JavaScript测试的HTML元素

所以我有一个特殊的问题,在我的react组件中,我使用了以下命令： document.getElementById('modalsContainer').appendChild(recognitionProfileZoom); document.getElementById('modalsContainer').appendChild(categoryZoom); 和： document.getElementById('cddoccategoryzo

javascript – 单元测试React单击组件外部

使用this answer中的代码解决组件外部的点击： componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } setWrapperRe

javascript – 如何使用Jest / Enzyme在React中测试文件类型输入的更改处理程序？

我想测试我的React组件是否可以使用FileReader从< input type =“file”/>中导入用户选择文件的内容.元件.我的下面的代码显示了一个测试中断的工作组件. 在我的测试中,我试图使用blob作为文件的替代品,因为blob也可以被FileReader“读取”.这是一种有效的方法吗？我还怀疑问题的一部

javascript – 在Jest中模拟按钮单击

模拟按钮单击似乎是一个非常简单/标准的操作.然而,我无法在Jest.js测试中使用它. 这是我试过的(也使用jquery),但它似乎没有触发任何东西： import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button')

javascript – React Enzyme – 测试`componentDidMount`异步调用

大家. 我在componentDidMount中发生异步调用后测试状态更新时遇到了奇怪的问题. 这是我的组件代码： 'use strict'; import React from 'react'; import UserComponent from './userComponent'; const request = require('request'); class UsersListComponent exten

javascript – 酶模拟onChange事件

我正在用摩卡和酶测试反应成分.这是组件(当然简化为简化)： class New extends React.Component { // shortened for simplicity handleChange(event) { // handle changing state of input const target = event.target; const value = target.value; const

javascript – 使用Jest监视componentDidMount中的方法调用

我最近想测试一些自定义方法在React组件的componentDidMount方法中有条件地调用. componentDidMount() { if (this.props.initOpen) { this.methodName(); } } 我正在使用Jest作为我的测试框架,其中包括针对模拟/间谍的jest.fn().我已经读过,通过做类似以下的事情,用Sino

javascript – 将jest.fn()函数传递给酶浅渲染中的mapDispatchToProps

有非常简单的组件：从’prop-types’导入PropTypes 从’反应’导入反应从’react-redux’导入{connect} class MyComponent extends React.Component { componentWillMount() { if (this.props.shouldDoSth) { this.props.doSth() } } render () { return

javascript – 使用React,react-router,jest和enzyme测试状态更改

我正在尝试通过测试来验证有状态组件的状态在componentDidMount中是否已适当更改,但由于react-router而遇到了问题. 我正在使用Enzyme,所以我使用mount来评估生命周期方法,例如componentDidMount.通常情况下,这很好…… it("changes state after mount", () => { const newValue

javascript – TypeError：_enzyme2.default.configure不是函数

最近,我从React 15.4.2迁移到了React 16.0.0. 以下是我在项目中的当前版本： { "jest":{ "verbose":true, "automock":false, "testRegex":"\\.test\\.js$", "moduleNameMapper":{

javascript – 如何使用Jest和Enzyme测试getDerivedStateFromProps

我有这个使用新的getDerivedStateFromProps生命周期的简单代码： static getDerivedStateFromProps(nextProps: Props, prevState: State) { if (nextProps.value !== prevState.value) { console.log('hello'); return { value: nextProps.value }; } ret

javascript – 如何测试React组件上定义为箭头函数(类属性)的组件方法？

我可以通过使用spies和Component.prototype来测试类方法.但是,我的许多类方法都是类属性,因为我需要使用它(对于this.setState等),并且因为构造函数中的绑定非常繁琐且看起来很丑,所以在我看来使用箭头函数要好得多.我使用类属性构建的组件在浏览器中工作,所以我知道我的babel配置

javascript – Jest预期已经调用的模拟函数,但它没有被调用

我已经看过各种建议来解决测试类属性没有成功的问题,并且想知道是否有人可能会对我可能出错的地方进行更多的了解,这里是我尝试了所有错误的测试预期模拟被调用的函数,但没有被调用. Search.jsx import React, { Component } from 'react' import { func } from 'prop-types' impo

javascript – Jest Enzyme如何对包裹组件的存在进行浅层测试

我正在测试一个有条件地渲染包装组件的组件.我正在使用酶和jest,并且通过shallow()方法呈现根组件. 问题是测试Root组件是否包含包装组件. 如何在不使用mount()render方法的情况下测试包装的组件是否存在？ hoc.component.jsx export function HOC(Component) { render() {

javascript – 在使用Jest测试时使用webpack导入图像时,酶渲染失败

我想测试一个简单的组件是否渲染(因为我还在搞清楚Jest).应用程序本身使用webpack加载图像以显示徽标. 当我尝试挂载/渲染/浅化无状态组件时,Jest会抛出错误. FAIL src/components/blog/blogList.spec.jsx ● Test suite failed to run /home/requinard/Projects/manus-f

使用 Jest 和 Enzyme 测试 React 组件

type: FrontEnd title: Testing React components with Jest and Enzyme link: https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f author: Artem Sapegin 使用 Jest 和 Enzyme 测试 React 组件引言有人说在通常情况下测试 React 组件是

javascript – 用酶和TypeScript浅HOC

我有一个HOC来测试,在浅层安装期间我应该调用一些类方法： it('Should not call dispatch', () => { const dispatch = jest.fn() const WrappedComponent = someHoc(DummyComponent) const instance = shallow( <WrappedComponent d

javascript – 渲染子组件时无法设置上下文

我正在尝试使用Enzyme测试自定义Material-ui React组件,但收到以下错误：错误：’警告：失败的上下文类型：’ChildComponent’中未指定必需的上下文’muiTheme’. 我尝试过根据this设置上下文.我想要访问和测试的组件是子组件. const root = shallow(<RootComponent />, {context: {muiT

javascript – React / enzyme：如何测试子组件？

这就是我的Messenger组件的样子.如您所见,主要组件和列表组件.主要组件默认导出. 有了这个,我的应用程序中的一切都按预期工作. /imports/ui/components/messenger.jsx import React, { Component } from 'react' import PropTypes from 'prop-types' import { Container, Segment

javascript – 模拟点击material-ui切换组件测试

所以我试图使用jest和酶测试一些基于material-ui toggle组件的功能. 我有一个通用的clickIt函数,适用于其他材料-ui组件,但在这一个它似乎没有触发状态更改 function clickIt(wrapper, selector) { let elem = wrapper; if (selector) { elem = wrapper.find(selector);

javascript – 使用酶测试React Component className

当测试一个使用className来设置css类的react组件时使用酶(mount或浅)我能够正确测试它是div还是无法让它在h1标签上工作. 这是一些吗？ >与mount或浅的事情有什么关系？>这是我缺少的东西吗？>这是一个错误吗？任何想法赞赏！ JSX： import React from 'react' export const PageNotFound =