gpt4 book ai didi

javascript - react /Jest/ enzyme : How to test adding text to input and checking for that text?

转载 作者:行者123 更新时间:2023-12-03 03:49:09 25 4
gpt4 key购买 nike

我们有一个带有简单输入和提交按钮的表单。提交后,section.user-list 中将添加 li。

输入ni并点击搜索按钮后,将进入 View 2个lis,其中一个包含“Nick Sims”

enter image description here

enter image description here

但是,运行下面的测试后, View 从未改变,测试选择默认的“搜索用户”字符串,该字符串应由新的 lis 替换。

请注意,在我们的应用中,有一个调度函数会调用 SEARCH_USERS 的 Redux 操作以返回用户列表,这可能是问题所在吗?

enter image description here

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');
});
});

UserListContainer(智能)

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 更新状态。

我们正在测试的内容需要分为几个步骤。

  • mock 虚假数据
  • 测试 reducer 中的操作
  • Enzyme 尚不支持分派(dispatch)事件

https://github.com/airbnb/enzyme/blob/master/docs/future.md

关于javascript - react /Jest/ enzyme : How to test adding text to input and checking for that text?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45241573/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com