Question

我有一个简单的测试：

import React from 'react';
import GenericButton from 'components/buttons/GenericButton';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

describe('Generic Button', () => {
    test('Button action called when clicked', () => {
        var clicked = false;
        const component = shallow(
            <GenericButton action={() => {
                clicked = true;
            }}
            id="testComponent"/>
        );

        component.find('testComponent').first().simulate('click');
        expect(clicked).toBeTruthy();
    });
});

然而，这最终会在最终完成时失败，

如果我将断言设置为最终发生（例如使用setTimeout），它将起作用

然而，如果我在断言之前执行以下操作会更好（在使用jasmine的示例中找到这个）

        waitsFor(() => {
            return clicked;
        }, "the value to change", 1000);

什么是酶/ jest的等效调用？

编辑：组件的内容

render() {
    return <Button id={this.props.id}
                   key={this.props.id}
                   onClick={() => this.props.action()}
                   bsStyle={this.props.style}>
               {this.props.text}
           </Button>;
}

（Button是第三方库组件）

Answer 1

要测试是否正确添加了点击处理程序，请将间谍传递到评论中，模拟点击并检查是否调用了间谍。这样做不需要使用waitsFor。

import React from 'react';
import GenericButton from 'components/buttons/GenericButton';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

describe('Generic Button', () = > {
  test('Button action called when clicked', () = > {
    const action = jest.fn();
    const component = shallow(
      <GenericButton action={action}
            id="testComponent"/>
    );
    component.find('Button').first().simulate('click');
    expect(action).toHaveBeenCalled();
  });
});

等待Enzyme和Jest中的条件（最终一致性，断言超时）

1 个答案: