- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们有一个带有简单输入和提交按钮的表单。提交后,section.user-list
中将添加 li。
输入ni
并点击搜索按钮后,将进入 View 2个lis,其中一个包含“Nick Sims”
但是,运行下面的测试后, View 从未改变,测试选择默认的“搜索用户”字符串,该字符串应由新的 lis 替换。
请注意,在我们的应用中,有一个调度函数会调用 SEARCH_USERS 的 Redux 操作以返回用户列表,这可能是问题所在吗?
import React from 'react'
import { shallow, mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { UserListContainer } from './UserListContainer'
const userListContainer = mount(<UserListContainer />);
describe('<UserListContainer /> tests', () => {
let wrapper;
beforeAll(() => {
wrapper = mount(<UserListContainer searchUser={() => {}} />);
});
it('Should contain an input', () => {
expect(wrapper.find('input')).toHaveLength(1);
});
it('Should show User after a user searches', () => {
expect(wrapper.find('input.input-user')).toHaveLength(1);
wrapper.find('input.input-user').simulate('keydown', { which: 'r' });
wrapper.find('input.input-user').simulate('keydown', { which: 'o' });
const text = wrapper.find('input.input-user').text();
const value = wrapper.find('input.input-user').get(0).value;
console.log('value:', value)
console.log('text:', text)
wrapper.find('button.btn-blue').simulate('click');
expect(wrapper.find('.user-population li').text()).toEqual('Nick Sims');
});
});
import React, { Component } from "react"
import { connect } from 'react-redux'
import { UserList } from '../../components'
import { searchUser } from '../../actions'
export class UserListContainer extends Component {
constructor(props) {
super(props);
}
onFormSubmit(e, user) {
e.preventDefault();
this.props.searchUser(user)
}
render() {
return (
<div className='users-container'>
<UserList
users={this.props.users}
lastUserSearched={this.props.lastUserSearched}
onFormSubmit={this.onFormSubmit.bind(this)}
/>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
users: state.usersReducer.users,
lastUserSearched: state.usersReducer.lastUserSearched
}
}
const mapDispatchToProps = (dispatch) => {
return {
searchUser: (user) => {dispatch(searchUser(user))},
}
}
const userList = UserListContainer;
export default connect(mapStateToProps, mapDispatchToProps)(userList)
import React from 'react'
import { Link } from 'react-router-dom'
export default class UserList extends React.Component {
constructor(props) {
super(props);
}
onFormSubmit(e) {
const value = this.input.value;
this.props.onFormSubmit(e, value);
}
populateUsers() {
const users = this.props.users;
if(!this.props.lastUserSearched) {
return <li>Search for a user</li>
}
{ /* Search / Auto Suggest functionality */ }
const regex = this.props.lastUserSearched;
let re = new RegExp(regex, "gi");
let filteredUsers = users.filter(v => {
if(v.name.match(re)) {
return v;
}
return;
});
if(filteredUsers.length < 1) {
return <li>No users found with that name</li>
}
return filteredUsers.map(x => {
return (
<li key={x._id}>
<Link to="#" className="user-link">
{ x.name }
</Link>
</li>
)
});
}
render () {
return (
<section className="user-list">
<form onSubmit={ this.onFormSubmit.bind(this) }>
<label>
<input
type="text"
className="input-user"
placeholder="Search.."
ref={(ref) => { this.input = ref; }}
/>
<button className="btn-blue" type="submit">Search</button>
</label>
</form>
<h2>User List</h2>
<ul className="user-population">
{ this.populateUsers() }
</ul>
</section>
)
}
}
// wrapper.find('input.input-user').simulate('input', { target: { value: 'ni' } });
wrapper.find('input.input-user').simulate('submit', { target: { value: 'ni' } });
最佳答案
这是一个过于复杂的测试,该操作会调度一个事件,然后通过 Redux 更新状态。
我们正在测试的内容需要分为几个步骤。
关于javascript - react /Jest/ enzyme : How to test adding text to input and checking for that text?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45241573/
我的页面上有多个按钮: Home Action 1 Action 2 如何通过其文本选择“操作 2”按钮,以便单击它?我知道可能还有其他方法来选择该按钮,但我专门寻找通过文
我目前正在学习使用 Enzyme 进行单元测试。 似乎有一种奇怪的行为: enzyme 似乎随机地不识别某些成分。让我给你举个例子: 这是我的SafeContainer组件: import React
我在使用 Jest/Enzyme 编写的测试用例时遇到了一些问题。我有一个 React/Redux 组件,正在尝试编写一个基本测试,但出现以下错误: Invariant Violation: Reac
在我的项目中使用 enzyme 3 时出现以下错误(之前使用 enzyme 2 并且一切正常): Enzyme Internal Error: configured enzyme adapter di
我正在致力于使用摩卡、 enzyme 创建 react 组件的单元测试。下面是一个示例组件。 Foo.js class Foo extends React.Component { custom
我已经设置了 jest 和 enzyme,但无法运行。它提示 EnzymeAdapter 基类。 我试过了 configure({}) with import { configure } from '
使用 React+Enzyme+Jest 您好,我使用 .innerText 属性来获取特定元素的值,请参阅我的代码的第 5 行: _modifyProfileField (event) {
我正在使用 airbnb 的 enzyme 库进行 react 测试,我只想检索当前节点的文本,不包括来自任何子节点的任何文本。 const component = hellothere 如果我做
我一直在查看很多使用 Enzyme 和 Jest 测试 React 和 Redux 应用程序的示例,但很少有人提到代码清理。当使用 shallow 或 mount 时,您是否不需要明确调用 unmou
从文档来看,这样的事情应该是可能的: const wrapper = mount(); expect(wrapper.find('.foo')).to.have.length(1); 但就我而言,这会
有关enzyme 测试库中adapter 用途的任何文档。 import { configure } from 'enzyme'; import Adapter from 'enzyme-adapte
我需要访问内部组件的状态,使其在单击事件时处于事件状态,我的问题是 Enzyme 在使用 mount 时不允许这样做,这只能通过 来实现如 here 中提到的 enzyme 的浅渲染,也如上所述,我尝
我正在尝试使用 Enzyme 来测试组件的方法。我知道执行此操作的典型方法是使用 Enzyme 的 instance() 方法。 问题是,这只适用于root组件,我的组件需要包装在两个上下文提供程序中
我正在尝试测试当通过简单的 bool 值更新状态时,在父组件中其子组件是否正确呈现。在父组件下方: class Parent extends Component { ... render()
我的渲染函数中有一个 FileInput } className= 'fileInput' /> 我需要编写一个文件上传测试,当我模拟更改函数时,它调用函数file
我通过 create-react-app 创建了一个新的 React 应用程序,我想为我在应用程序中创建的名为“MessageBox”的组件编写单元测试。这是我编写的单元测试: import Mess
昨天我将React项目升级到了v16.0,但是我发现Enzyme有一些问题 Error: Enzyme Internal Error: Enzyme expects an adap
我有一个具有多种渲染方法的组件。我怎样才能测试它们呢?使用 enzyme 和 Jest 进行 react 。 一些伪代码作为我的组件结构的示例,因为该组件非常大。 class MyComponent
我正在使用 Jest 和 Enzyme 来测试我的 react 组件。其中一项测试如下所示: import DropDown from './DropdDown'; import SelectButt
我正在尝试测试轮子事件。我在加载事件中添加滚轮监听器。 this.domElement = document.getElementById('myImg'); if (this.domElement)
我是一名优秀的程序员,十分优秀!