reactjs - 如何在 Testcafe 中设置 react props

Question

我正在尝试测试一个 react 组件，该组件的属性会在用户登录时发生变化。我无法从 testcafe 套件本身更改登录 Prop ，因为用户只能单击她在电子邮件中收到的神奇链接登录。

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

测试咖啡馆总是将 isLoggedIn prop 视为 false，并且它不允许在测试时将组件 props 设置为某些自定义值。

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

Answer 1

我会稍微改变一下设计，

我会将 login 和 logout 函数作为 props 传递给组件，以便于测试它们

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