Questions tagged «enzyme»

我正在用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 

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

95 testing  meteor  reactjs  chai  enzyme 

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

90 unit-testing  reactjs  enzyme 

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

83 javascript  reactjs  testing  jestjs  enzyme 

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

74 reactjs  jestjs  enzyme  create-react-app 

我在带有打字稿的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', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: …

17 reactjs  typescript  react-router  jestjs  enzyme 

我已经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 ( <Button classes={{ root: buttonStyle.root }} …

16 javascript  css  reactjs  jestjs  enzyme