标签: 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');

但当然上述工作都没有.

我觉得我错过了显而易见的事.

但是,当我查看文档时,我没有看到类似的例子.

任何人？

在发布这个问题之前,我试图在sqa stackexchange中搜索,但我发现没有关于浅的帖子并在那里渲染,所以我希望有人可以帮助我.

什么时候我应该使用浅和渲染测试反应组件？根据airbnb文档,我对两者的区别提出了一些看法:

1. 由于浅层是将组件作为一个单元进行测试,因此它应该用于"父"组件.(例如桌子,包装等)

2. 渲染用于子组件.

我问这个问题的原因是,我很难弄清楚应该使用哪一个(尽管文档说他们非常相似)

那么,我如何知道在特定场景中使用哪一个？

我对使用<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了.我需要两个都正常工作.我该如何解决？

编辑:

我应该提一下,<EditableText />不是一个受控组件.但是当我defaultValue进入时<input />,它似乎设定了价值.上面的第二个代码块会打印出值,同样如果我在Chrome中检查输入元素并输入$0.value控制台,它会显示预期值.

模拟按钮单击似乎是一个非常简单/标准的操作.然而,我无法在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

我正在尝试对我的reactjs组件进行单元测试:

import React from 'react';
import Modal from 'react-modal';
import store from '../../../store'
import lodash from 'lodash'

export class AddToOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {checked: false}
    //debugger
  }
  checkBoxChecked() {
    return true
  }
  render() {
    console.log('testing=this.props.id',this.props.id )
    return (
      <div className="order">
        <label>
          <input
            id={this.props.parent}
            checked={this.checkBoxChecked()}
            onChange={this.addToOrder.bind(this, this.props)}
            type="checkbox"/>
          Add to order
        </label>
      </div>
    )
  }
}

export default AddToOrder;

刚开始我已经在努力断言checkBoxChecked方法:

import React from 'react-native';
import {shallow} from 'enzyme';
import {AddToOrder} from '../app/components/buttons/addtoorder/addtoorder';
import {expect} from 'chai'; …

我有一个反应组件(这是为了证明问题而简化):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

现在我想用提供的值测试那些handleNameInput()调用searchDish.

为了做到这一点,我想创建一个替换组件方法的jest模拟函数.

到目前为止,这是我的测试用例:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

但是我在控制台中获得的是SyntaxError:

的SyntaxError

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

Run Code Online (Sandbox Code Playgroud)

所以我的问题是,如何用酶正确模拟组分方法？

我在带有打字稿的 react router v5.1.2 中使用 UseHistory 钩子吗？运行单元测试时，我遇到了问题。

类型错误：无法读取未定义的属性“历史”。

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: '',
                search: '',
                state: '',
                hash: ''
            },
            action: 'REPLACE' as Action,
            push: jest.fn(),
            go: jest.fn(),
            goBack: jest.fn(),
            goForward: jest.fn(),
            block: jest.fn(),
            listen: jest.fn(),
            createHref: jest.fn()
        };//fake …

我正在尝试测试React组件的样式属性.在测试中获得样式参数的最佳方法是什么？

此时,我最好的选择是测试HTML是否包含字符串,但我认为有更好的选择.

案件:

it('Should render large image when desktop', () => {
    const dummyUrl = 'http://dummyUrl';
    const wrapper = shallow(
      <MockedStore
        initialState={{
          app: fromJS({ browser: { desktop: true } }),
        }}
      >
        <LandingHero bigImage={dummyUrl} />
      </MockedStore>
    );
  });

要测试的组件是:

// @flow
import React, { Component } from 'react';
import gc from 'styles/core.scss';
import $ from 'jquery';
import DownloadButton from 'components/DownloadButton';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import DownArrow from 'components/DownArrow';
import { connect } from 'react-redux';
import type { Map } from …

要么我不明白,dependencies对devDependencies在节点还没有100%或eslint只是错在这里(不能够正确地分析这个的):

   3:1   error  'chai' should be listed in the project's dependencies, not devDependencies              import/no-extraneous-dependencies
   4:1   error  'chai-enzyme' should be listed in the project's dependencies, not devDependencies       import/no-extraneous-dependencies
   5:1   error  'enzyme' should be listed in the project's dependencies, not devDependencies            import/no-extraneous-dependencies
   7:1   error  'sinon' should be listed in the project's dependencies, not devDependencies             import/no-extraneous-dependencies
   9:1   error  'redux-mock-store' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies

这些是测试依赖项,为什么说它们应该被列入dependencies？

附加说明:我们使用Travis作为我们的CI,所以我不知道它是否会对此产生影响.

我正在尝试为一个简单的React组件编写一个简单的测试,我想使用Jest来确认当我用酶模拟点击时已经调用了一个函数.根据Jest文档,我应该可以使用spyOn这个:spyOn.

然而,当我尝试这个时,我不断得到TypeError: Cannot read property '_isMockFunction' of undefined我的意思,我的间谍是未定义的.我的代码看起来像这样:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {

  myClickFunc = () => {
      console.log('clickity clickcty')
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" onClick={this.myClickFunc}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

在我的测试文件中:

import React …