Questions tagged «enzyme»

3
反应酶找到第二(或第n)节点
我正在用Jasmine Enzyme浅层渲染测试React组件。 为了这个问题的目的在这里简化了... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponent有2个实例,MyInnerComponent我想在每个实例上测试道具。 第一个我知道如何测试。我用find用first... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); 但是,我正在努力测试的第二个实例MyInnerComponent。 我希望像这样的事情可以工作... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); 甚至这个... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); 但是,上述两种工作当然都没有。 我觉得我想念显而易见的东西。 但是,当我浏览文档时,没有看到类似的示例。 任何人?
128 reactjs  jasmine  enzyme 

2
什么时候应该在酶/反应测试中使用渲染和浅化?
在发布此问题之前,我曾尝试在sqa stackexchange中进行搜索,但未找到有关浅层和渲染的文章,因此希望有人能在这里为我提供帮助。 什么时候应该在测试反应组件时使用浅层渲染?根据airbnb文档,我对两者的区别提出了一些意见: 由于浅层将组件作为一个整体进行测试,因此应将其用于“父级”组件。(例如桌子,包装纸等) 渲染用于子组件。 我问这个问题的原因是,我很难确定应该使用哪一个(尽管文档说它们非常相似) 那么,我怎么知道在特定情况下使用哪个呢?

16
酶-如何访问和设置<input>值?
我对使用&lt;input&gt;时如何获取价值感到困惑mount。这是我的测试内容: it('cancels changes when user presses esc', done =&gt; { const wrapper = mount(&lt;EditableText defaultValue="Hello" /&gt;); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); 控制台将输出undefined。但是,如果我稍微修改一下代码,它就会起作用: it('cancels changes when user presses esc', done =&gt; { const wrapper = render(&lt;EditableText defaultValue="Hello" /&gt;); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); 当然,除了那input.simulate行因为我现在正在使用而失败render。我都需要正常工作。我该如何解决? 编辑: …

6
模拟Jest中的按钮单击
模拟按钮单击似乎是非常简单/标准的操作。但是,我无法在Jest.js测试中使用它。 这是我尝试过的(也使用jQuery完成),但似乎没有触发任何操作: import { mount } from 'enzyme'; page = &lt;MyCoolPage /&gt;; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens

5
运行笑话测试时是否可以显示所有测试说明?
我在我的create-react-app项目中使用笑话和酵素。运行时npm test,我得到一个输出,该输出显示已通过的测试文件的名称,但我希望该输出还包括测试的名称。 例: Button.test.js it ('renders button', () =&gt; { const button = shallow(&lt;Button type="save"/&gt;); expect(toJson(button)).toMatchSnapshot(); }); 现在,当我运行npm test时,输出仅为: 通过src / Button.test.js“ 以及通过和失败测试的数量(测试成功时)。我希望输出包含“ renders button”和任何其他测试描述(例如运行rspec测试时输出的外观)。

4
如何嘲笑useHistory挂钩?
我在带有打字稿的React Router v5.1.2中使用UseHistory挂钩吗?运行单元测试时,我遇到了问题。 TypeError:无法读取未定义的属性“ history”。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () =&gt; { beforeEach(() =&gt; { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: …

1
为什么JEST测试中的getComputedStyle()在Chrome / Firefox DevTools中将不同的结果返回给计算样式
我已经MyStyledButton基于material-ui 编写了一个自定义按钮()Button。 import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( &lt;Button classes={{ root: buttonStyle.root }} …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.