如何在Testcafe中设置react道具

问题描述

我正在尝试测试一个具有用户登录时会更改的属性的react组件。 我无法从testcafe套件本身更改登录道具，因为用户只能通过单击电子邮件中收到的魔术链接来登录。

鉴于下面的示例组件，我如何测试注销按钮？

测试咖啡馆将始终将isLoggedIn道具视为false，并且不允许在测试时将组件道具设置为某些自定义值。

header.js

import React from 'react';

const Header = ({ isLoggedIn }) => (
  <div>
    {isLoggedIn ? (
      <h1>text unreachable from testcafe</h1>
      <button onClick={logout}>logout</button>
    ) : (
       <button onClick={login}>Login</button>    
      )}
  </div>
);
export default Header;

test-cafe.js

import { ReactSelector } from 'testcafe-react-selectors';
import { waitForReact } from 'testcafe-react-selectors';

fixture`HEADER`
  .page('http://localhost:3000')
  .beforeEach(async () => {
    await waitForReact();
  });

test('Page should load the header',async (t) => {
  const App = ReactSelector('App').withProps({ isLoggedIn: true });
  const actual = App.find('h1').innerText;
  const expected = 'text unreachable from testcafe';
  await t.expect(actual).eql(expected);
});

解决方法

我会稍微修改一下设计

我会将login和logout函数作为道具传递给组件，以便于对其进行测试。

const Header = ({ isLoggedIn,login,logout }) => (
  <div>
    {isLoggedIn ? (
      <button onClick={login}>Login</button>
    ) : (
        <button onClick={logout}>Logout</button>
      )}
  </div>
);

进行测试

const logoutMock = jest.fn();
const component = mount(<Header ... logout={logoutMock} />);
const button = component.find('button').simulate('click');

expect(logoutMock).toBeCalled();

,

testcafe-react-selectors模块无意于更改反应组件的状态。要实现此方案，您可以通过“魔术链接”模拟授权，或使用诸如“玩笑”之类的组件测试工具。

,

事实证明，没有合适的方法来做到这一点。

目前有两种选择：

1-使用隐藏按钮将要更改的道具短路。即您可以在开发人员模式下创建一个隐藏按钮，然后在测试中单击该按钮以更改道具，从而更改应用程序的状态。

2-我与Magic Link支持小组进行了交谈，他们说他们将在今年年底之前以开发人员模式添加一项功能，从而无需登录电子邮件即可登录 。您可以输入[e-mail]电子邮件地址，它将自动登录。这很方便！