如何在Testcafe中设置React Props

Question

我正在尝试测试一个 React 组件，这个组件具有当用户登录时会更改的属性。

由于用户只能通过收到的魔法链接进行登录，因此我无法从 testcafe 测试套件本身更改登录属性。

在下面给出的示例组件中，我该如何测试“Logout”按钮？

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);
});

- David

Answer 1

testcafe-react-selectors 模块的目的不是改变 React 组件状态。要实现这种情况，您可以通过“魔法链接”模拟授权，或使用像“jest”这样的组件测试工具。

- mlosev

Answer 2

我会稍微改变设计，将登录和注销功能作为道具传递给组件，以便于测试它们。

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();

- Ali Faris

---

感谢您的评论，但我想使用TestCafe而不是Jest。这只是一个例子，当isLoggedIn=true时呈现的内容可能比按钮或函数复杂得多。 - David

Answer 3

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

目前有两个选项：

1-使用隐藏按钮来短路您想要更改的道具。即在开发模式下创建一个隐藏按钮，并在测试中单击它以更改道具，从而更改应用程序的状态。

2-我与Magic Link支持人员交谈，他们说他们将在今年年底之前添加一个功能，允许在开发模式下登录而无需单击电子邮件链接。您可以输入[e-mail]电子邮件地址，它将自动登录。那很方便！

- David