Question

我正在测试的React组件中具有以下功能。

renderLoginLink(caption) {
    return (
      <a href="#" id="lnkAuthenticateWithGoogle" onClick={() => this.props.actions.authenticateWithGoogle()}>
       {caption}
      </a>
    );
  }

当我运行jest --coverage时，该功能被标记。我为通过的功能编写了以下测试。

describe('Login', () => {
    it('calls renderLoginLink()', () => {
        const actions = {
            authenticateWithGoogle: jest.fn()
        }
        const expectedNode = <a href="#" id="lnkAuthenticateWithGoogle" onClick={() => actions}>testCaption</a>

        let node = document.createElement('div');
        let instance = ReactDOM.render(<Login {...initialState} />, node);
        expect(JSON.stringify(instance.renderLoginLink("testCaption"))).toEqual(JSON.stringify(expectedNode));
    });
});

我不确定我缺少什么或者我可以写什么其他测试来满足玩笑的要求。

Answer 1

尝试使用酶中的shallow和simulate：

function setup() {
  const props = {
    actions: {
      authenticateWithGoogle: jest.fn(),
    },
  };

  return { props };
}

describe('Login', () => {
  const props = setup();
  const component = shallow(<Login {...props} />);

  it('calls renderLoginLink() ', () => {
    const loginLink = component.find('lnkAuthenticateWithGoogle');
    loginLink.simulate('click');
    expect(props.actions.authenticateWithGoogle).toBeCalled();
  });
});

Answer 2

您是在开玩笑地告诉onclick处理程序应等于：

() => actions

这是一个返回对象并且不执行其他操作的函数。

相反，我将使用shallow()渲染组件，以开玩笑的方式传递authenticateWithGoogle函数，并确认单击<a>会调用该模拟。

进行测试后，笑话覆盖范围仍在标记行

2 个答案: