- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我有一个搜索栏组件,它看起来像:
render () {
const { onChangeTextInput } = this.props
return (
<Form
name="searchForm"
ref={(ref) => {
this.searchForm = ref
}}
>
<TextInput
noSpacing
placeholder={t('search')}
name="search"
validate="text"
icon={this.icon}
onChangeTextCallback={() => {
onChangeTextInput(this.searchForm.values)
}}
/>
)
</Form>
)
}
}
我正在使用浅渲染和开 Jest 来运行单元测试来测试以下场景"
我正在运行的测试声明为:
test('SearchBar returns value on text change', () => {
const onChangeFunction = jest.fn()
const obj = shallow(
<SearchBar onChangeTextInput={onChangeFunction} />
)
obj.find('TextInput').props().onChangeTextCallback('h')
expect(onChangeFunction).toHaveBeenCalledWith('h')
})
我收到一个奇怪的错误:
TypeError: Cannot read property 'values' of undefined
51 | icon={this.icon}
52 | onChangeTextCallback={() => {
> 53 | onChangeTextInput(this.searchForm.values)
| ^
54 | }}
55 | />
56 | )
我的 obj.html() 测试转储看起来像:
<Form name="searchForm" if={true}>
<TextInput
noSpacing={true}
placeholder="search"
name="search"
validate="text"
icon={{
$$typeof: Symbol(react.element),
type: [(Function: Icon)],
key: null,
ref: null,
props: {
name: "search",
size: 25,
color: "#00a8ca",
style: { position: "absolute", right: 0, bottom: 7 },
allowFontScaling: false,
type: "MaterialIcons",
if: true,
},
_owner: null,
_store: {},
}}
onChangeTextCallback={[(Function: onChangeTextCallback)]}
value={null}
style={{}}
hasFloatingLabel={true}
numberOfLines={1}
isPassword={false}
if={true}
/>
)
</Form>
这里发生了什么?我有自定义表单,可以通过 refs 给我值。我是否需要做一些事情并可能初始化 Form 组件?请帮忙,我对这些东西比较陌生。
最佳答案
问题
ref
回调未被调用,因此当 onChangeTextCallback()
为 this.searchForm
时 undefined
调用。
详情
来自Callback Refs文档:“当组件挂载时,React 将使用 DOM 元素调用 ref 回调”。
在测试中,您使用的是 shallow()
。浅渲染不会挂载组件,因此永远不会调用 ref
回调。
解决方案
安装组件。由于您已经在使用 Enzyme
,因此您可以使用 mount()
.请注意,“完整的 DOM 呈现要求在全局范围内提供完整的 DOM API”,对于 Jest
,您可以 configure the test environment to use jsdom
.
关于javascript - Jest 测试因 refs 和 Form 而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52265354/
我想读取帖子的数据并获取用户 key ,然后通过它进行搜索并同时获取用户数据,我尝试过,但它后退了一步,直到它才显示用户名我执行任何其他操作 这是帖子和经过身份验证的用户的 Firebase 实时数据
您知道是否有办法将 js ref 和 css ref 作为单个 ref 包含在 html 中?通常这些 ref 单独包含在 html head 中,但我的经理想知道下游消费者是否有一种简化的方法将这些
我正在使用 Swing+Clojure 开发一个 GUI 应用程序,它需要各种可变数据(例如滚动位置、用户数据、文件名、选定的工具选项等)。 我至少可以看到三种不同的处理这组数据的方式: 创建对所有数
我正在尝试通过 React 使用 ref 属性。我的浏览器出现奇怪的错误,但我无法弄清楚问题出在哪里。谁能向我解释一下为什么我会收到此错误: Error: Invariant Violation: a
在我的程序中,我有模板类,这些模板类主要是用于特殊目的 std::function 的包装器。最小的例子是: template class Foo { public: exp
如果被引用为参数的对象在函数中被修改,是否使用 ref 有关系吗?下面两个函数有区别吗? void DisposeObject(ClassThing c) { c.Dispose(); } vo
尝试将大型但线性的 svn 存储库迁移到 git。 svn 存储库没有标准布局(主干、分支、标签)...只有主干的一个目录。 Ubuntu 12.4 LTS,git 1.7.9.5。 $ git sv
您现在如何设置动态引用? 我收到一个错误 cannot set property of 'test' undefined ,如果我使用 this.someRef['test'] = ref;}/>
试图理解 gerrit 中的 refs/for/refs/* 功能。这个问题与 refs/for/master 无关。 我们什么时候可以使用这个 refs/for/refs/* 功能。 有人可以为此解
我以不同的方式调用 4 种方法时得到不同的结果: static void Main(string[] args) { var emp = new Employee { Name = "ABC"
假设我有以下内容: var t = typeof(Foo).MakeByRefType(); 有没有办法将结果转换回typeof(Foo)? 老实说,我发现的唯一方法是: var t = typeof
我以下列方式使用 ref。那么当在第 5 种方法中创建一个新对象时,是否会一直访问 main 方法中的原始 emp 并在那里创建一个新对象? 如果是,有没有一种方法可以实现相同的功能而无需多次迭代,即
我在文档的 html 标签内有一些文本。文字看起来像这样 I need this text <ref> Some unwanted text </ref> I need thi
一些背景: 前几天我遇到了一些事情,这让我开始思考嵌套函数调用中的重载解析。考虑以下代码: #include void printer(const int &a) { std::cout <<
如果直接从 this.refs 获取元素对象,那么为什么要使用 ReactDOM.findDOMNode? var HelloMessage = React.createClass({ click:f
我在这里做错了什么,或者从 C# 7.2 开始,不支持通过 ref 返回并允许设置的索引器? 作品: public ref byte this[int index] { get { r
看来我现在几乎每天都在这里问问题。我不确定这是好事还是坏事... 今天的“WTF flavor ”涉及我在使用来自 NI Measurement Studio 对象的函数时完全和完全无能为力。与我之前
这个问题在这里已经有了答案: Does foreach() iterate by reference? (10 个答案) Alternative to using ref in foreach? (
给定一个函数声明 dynamic DoSomething(dynamic inputObject) 我可以用枚举调用它作为inputObject: MyEnum myEnum; myEnum = Do
如果我将数组传递给函数并在函数内对数组进行更改,则函数外部存在的数组会反射(reflect)这些效果。例如: var myArr = [1, 2, 3]; function popAll(arr) {
我是一名优秀的程序员,十分优秀!