- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我搜索了一个答案,但尚未找到适合我的用例的答案。我对使用 Jest/Enzyme 进行测试有点陌生,对使用 recompose 进行测试也很陌生。
我不知道如何测试我的功能组件,它是使用重构创建的。我似乎无法弄清楚如何在我的测试中访问 Prop (状态和处理函数)。
这是我的功能组件的示例,我将调用 UserDetails
const UserDetails = ({
userInfo,
onUserInfoUpdate,
className,
error,
title,
primaryBtnTitle,
submit,
secondaryBtnTitle,
secondaryBtnFunc,
...props
}) => (
<div className={className}>
<div className="user-details-body">
<Section title="User details">
<TextInput
caption="First Name"
value={userInfo.first}
onChange={onUserInfoUpdate('first')}
name="first-name"
min="1"
max="30"
autoComplete="first-name"
/>
<TextInput
caption="Last Name"
value={userInfo.last}
onChange={onUserInfoUpdate('last')}
name="last-name"
min="1"
max="30"
autoComplete="last-name"
/>
</Section>
</div>
<div className="errorBar">
{error && <Alert type="danger">{error}</Alert>}
</div>
<ActionBar>
<ButtonGroup>
<Button type="secondary" onClick={secondaryBtnFunc}>
{secondaryBtnTitle}
</Button>
<Button type="primary" onClick={submit}>
{primaryBtnTitle}
</Button>
</ButtonGroup>
</ActionBar>
</div>
这是我的 index.js 文件的示例代码,它将我的 withState 和 withHandlers 组合到我的组件中:
import UserDetails from './UserDetails'
import { withState, withHandlers, compose } from 'recompose'
export default compose(
withState('error', 'updateError', ''),
withState('userInfo', 'updateUserInfo', {
first: '',
last: '',
}),
withHandlers({
onUserInfoUpdate: ({ userInfo, updateUserInfo }) => key => e => {
e.preventDefault()
updateCardInfo({
...cardInfo,
[key]: e.target.value,
})
},
submit: ({ userInfo, submitUserInfo }) => key => e => {
e.preventDefault()
submitUserInfo(userInfo)
//submitUserInfo is a graphQL mutation
})
}
})
)
现在我正在尝试为该组件编写测试。我导入包含组件的索引文件以创建 HOC。
import React from 'react'
import renderer from 'react-test-renderer'
import { mount, shallow } from 'enzyme'
import UserDetails from './'
describe('UserDetails Element', () => {
it('test', () => {
const tree = mount( <UserDetails /> )
console.log(tree.props());
})
})
控制台日志在终端中给了我这个
{ children:
{ '$$typeof': Symbol(react.element),
type:
{ [Function: WithState]
displayName: 'withState(withState(withHandlers((UserDetails)))))' },
key: null,
ref: null,
props: {},
_owner: null,
_store: {} } }
如果我使用 console.log tree.props('userInfo')
,我会得到相同的输出。如果我使用 console.log tree.prop('userInfo')
或 tree.props().userInfo
此外,当我尝试在测试文件中使用我的处理程序时,我收到一个错误,指出该方法未定义。
我哪里错了? 谢谢!
最佳答案
您的测试加载增强 组件,而不是底层裸 UserDetails
组件。因此,您在 console.log
中看到的是最外层组件 (compose
) 的 props。您可以使用 tree.find(UserDetails)
获取内部组件。
为此,您必须在测试中导入这两个文件:
import UserDetails from './'
import BareUserDetails from './UserDetails'
并且以这种方式找到
const tree = mount( <UserDetails /> )
const innerDetails = tree.find(BareUserDetails);
enzyme
的find
并不总能按照您预期的方式找到您想要的东西。试验 find
提供的各种选项。
关于reactjs - 使用 enzyme 测试重组 - 访问 Prop 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49160884/
目录 一、状态变化 1.1 状态变化是什么 1.2 mutableStateListOf 和 mutableStateMapOf 二、重组的
这是我的真实数据列表的示例列表: df setNames(nm) } fun3 Unit: microseconds #> expr min lq me
在 clojure 中,我可以像这样解构 map : (let [{:keys [key1 key2]} {:key1 1 :key2 2}] ...) 这类似于 CoffeeScript 的方法
这个问题在这里已经有了答案: Re-Structuring a JSON (2 个答案) 关闭 9 年前。 我需要使用 Javascript/Jquery 将我的 JSON 重新组织成新的结构,但我
我有一个具有以下结构的表,列是出发地、目的地、旅行时间和出发时间。主键是出发地、目的地和出发时间的组合。有没有什么方法可以重新构造它,以便行中没有太多的起点和目的地重复? 最佳答案 “出发地和目的地太
需要将 JSON 重组为 Python 中的新结构。 例如: { 'a' : 1, 'b' : 1, 'd' : {'d1' : '1', 'd2' : 2}, 'm' : [
我正在努力了解重组的工作原理。虽然我理解它的基本概念,但我在使用 withProps 函数时遇到了问题。如果我尝试使用它来装饰带有附加 Prop 的组件的每个子组件,它根本无法工作。我所做的是: co
假设我有一个数据框列表。每个数据框都有这样的列: lists$a company, x, y ,z lists$b company, x, y, z lists$c company, x, y, z
好吧,我有这个数组 $city : [2] => Array ( [0] => Array ( [0] => fr
工作中的 subversion 存储库是在没有对其结构进行太多规划的情况下建立的。目前没有明确的标签、主干或分支配置,尽管通过使用 subclipse:tags 存在一些标签元数据 目前存储库的格式为
我有一个具有以下文件夹结构的 Git 存储库: allprojectfiles --otherfolders --source ----projectname ------projectname --
我有一个像这样的 git repo 结构- main-repo -file1 -file2 我想把它转换成类似的东西- main-repo -javascript -fil
我有一个像这样的 git repo 结构- main-repo -file1 -file2 我想把它转换成类似的东西- main-repo -javascript -fil
有人建议我从类结构(定义我自己的类)转移到 pandas DataFrame 领域,因为我设想对我的数据进行许多操作。 此时我有一个如下所示的数据框: ID Name Recordin
我想重构我的 pandas 数据框,其中 h1、h2 等是与小时相关的值。目前看起来像: h1 h2 h3 h4 h5 h6 h7 h8 h9
我在 postgresql 上使用查询返回这样的结果。 schedule | day | subject | grade | ========================
我有一个这样组织的数据框... **Name** | **Mealtime** | **Food** John | 8:00 am | cereal John | 1:00 pm | salad
我有基本的脚本知识,但我不知道如何解决这个问题。我正在尝试将银行自动生成的 CSV 文件转换为 YNAB(您需要预算)可以理解的格式。 YNAB 格式(所需的 csv 文件格式) Date,Payee
我正在重组我的 meteor 应用程序,突然每个逻辑(JS 脚本)与初始文件分离的 View (html 模板)都停止工作。 最初我的项目看起来像这样 -project -.meteor
我试图让 children 不影响导航栏,并像下拉菜单一样显示。 当前示例位于:dev4you.byethost15.com 函数应该如下: 用户将鼠标悬停在父项上 子项显示在类似列表、Underne
我是一名优秀的程序员,十分优秀!