标签: enzyme

我是单元测试的新手.我想测试React项目.当我开始使用React文档时,它将酶称为测试实用程序,这对我来说是一种模糊的.

Jest和之间有什么区别enzyme？

• 是enzyme断言库还是任务转轮？
• 我可以karma用Jasmine吗？
• 测试react-redux项目的最佳方法是什么？

编辑:解决了!向下滚动以查找答案

在我们的组件测试中,我们需要他们可以访问react-intl上下文.问题是我们在mount()没有<IntlProvider />父包装的情况下安装单个组件(使用Enzyme ).这可以通过将提供程序包装起来然后将root点指向IntlProvider实例来解决,而不是CustomComponent.

该测试与阵营-国际:酶文档仍然是空的.

<CustomComponent />

class CustomComponent extends Component {
  state = {
    foo: 'bar'
  }

  render() {
    return (
      <div>
        <FormattedMessage id="world.hello" defaultMessage="Hello World!" />
      </div>
    );
  }
}

标准测试案例(所需)(酶+摩卡+柴)

// This is how we mount components normally with Enzyme
const wrapper = mount(
  <CustomComponent
    params={params}
  />
);

expect( wrapper.state('foo') ).to.equal('bar');

但是,由于我们的组件FormattedMessage用作react-intl库的一部分,因此在运行上述代码时会出现此错误:

Uncaught Invariant Violation: [React Intl] …

我正在使用Enzyme单元测试我的React组件.据我所知,为了测试原始的未连接组件,我必须将其导出并测试它(我已经完成了).我已经设法为连接的组件编写了一个测试,但我真的不确定这是否正确,以及我想要测试连接组件的确切内容.

Container.jsx

import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';

const mapStateToProps = state => ({
  auth: state.auth
});
const mapDispatchToProps = dispatch => ({
  loginUser: credentials => dispatch(loginActions.loginUser(credentials))

});
export default connect(mapStateToProps, mapDispatchToProps)(Login);

Container.test.js

import React from 'react';
import {Provider} from 'react-redux';
import {mount, shallow} from 'enzyme';
import {expect} from 'chai';
import LoginContainer from '../../src/login/login.container';
import Login from '../../src/login/Login';


describe('Container Login', () => {
  it('should render the container component', () => …

我有一个实现shouldComponentUpdate方法的React组件,我想对它进行单元测试.理想情况下,我可以在单元测试中更改组件上的某个prop或state,并验证它是否重新呈现.如果有帮助,我正在使用酶.

使用此答案中的代码来解决组件外部的单击:

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

setWrapperRef(node) {
    this.wrapperRef = node;
}

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.props.actions.something() // Eg. closes modal
    }
}

我无法弄清楚如何对不愉快的路径进行单元测试以便警报不会运行,到目前为止我得到了什么:

it('Handles click outside of component', () => {
  props = {
    actions: {
      something: jest.fn(),
    }
  }
  const wrapper = mount(
    <Component {... props} />,
  )
  expect(props.actions.something.mock.calls.length).toBe(0)

  // Happy path should trigger mock

  wrapper.instance().handleClick({
    target: 'outside',
  })

  expect(props.actions.something.mock.calls.length).toBe(1)  //true

  // Unhappy path should not trigger mock …

所以基本上当组件安装时,我有一个事件监听器监听resize事件.它切换isMobileView状态,然后将其作为道具传递给子项.因此,这是必要的,这是有效的,并经过测试.我是一个相当新的测试人员,我正试图找出一种方法,我可以编写一个测试来调整窗口大小并使所有逻辑发生并测试它是如何执行的.

这是代码 -

componentDidMount() {
    this.setMobileViewState()
    window.addEventListener('resize', this.setMobileViewState.bind(this));
}

setMobileViewState() {
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) {
        this.setState({ isMobileView: true })
    } else {
        this.setState({ isMobileView: false })
    }
}

我知道代码有效,但我想为它编写一个测试.基本上只是确保状态正确变化的东西.

有没有办法获得实际的DOM节点,所以我可以使用Dom api查询它,而不是需要使用酶的api,它只是针对边缘情况,例如我需要断言关于dom节点本身的事情.

正如它所说的那样.一些示例代码:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

const b = wrapper.find('.btn'); 

expect(b.text()).to.be.eql('OK'); // fails,

此html方法还返回元素的内容,但也返回元素本身以及所有属性,例如它给出<button class='btn btn-primary'>OK</button>.所以我猜,最坏的情况是,我可以打电话html和正则表达,但......

有没有办法只获取元素的内容,所以我可以断言它.

我想测试我的React组件是否可以用来FileReader从<input type="file"/>元素中导入用户选择的文件的内容.我的下面的代码显示了一个测试中断的工作组件.

在我的测试中,我试图使用blob作为文件的替代品,因为blob也可以被"读取" FileReader.这是一种有效的方法吗？我还怀疑问题的一部分reader.onload是异步的,我的测试需要考虑到这一点.我需要某个地方的承诺吗？或者,我是否需要模拟FileReader使用jest.fn()？

我更愿意只使用标准的React堆栈.特别是我想使用Jest和Enzyme而不必使用Jasmine或Sinon等.但是如果你知道Jest/Enzyme 无法做到的事情,但可以采用另一种方式,那也可能有所帮助.

MyComponent.js:

import React from 'react';
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fileContents: ''};
        this.changeHandler = this.changeHandler.bind(this);
    }
    changeHandler(evt) {
        const reader = new FileReader();
        reader.onload = () => {
            this.setState({fileContents: reader.result});
            console.log('file contents:', this.state.fileContents);
        };
        reader.readAsText(evt.target.files[0]);
    }
    render() {
        return <input type="file" onChange={this.changeHandler}/>;
    }
}
export default MyComponent;

MyComponent.test.js:

import React from 'react'; import {shallow} from …

我有一个React组件,其中包含一些依赖于访问Redux存储等的其他组件,这会在执行完整的Enzyme安装时导致问题.让我们说这样的结构:

import ComponentToMock from './ComponentToMock';

<ComponentToTest>
  ...some stuff
  <ComponentToMock testProp="This throws a warning" />
</ComponentToTest>

我想使用Jest的.mock()方法来模拟子组件,因此它不是测试的关注点.

我知道我可以用以下方法嘲笑一个直的组件:

jest.mock('./ComponentToMock', () => 'ComponentToMock');

但是,由于此组件通常会收到道具,因此React会感到不安,并会发出有关未知道具(在这种情况下testProp)被传递给的警告<ComponentToMock />.

我试图返回一个函数,但是由于它被挂起,你无法在Jest模拟中返回JSX(我可以告诉).在这种情况下它会引发错误.

所以我的问题是我怎么能

a)ComponentToMock忽略传递给它的道具,或者

b)返回一个React组件,该组件可用于模拟我不担心测试的子组件.

或者,还有更好的方法？