UI测试中能否用TestCafe/Node模拟按钮触发函数的返回结果？

Question Context: #

I'm working on UI testing for a Rock Paper Scissors app, and I need to mock the return value of the random function that's passed to my Game class when a user clicks a button (which triggers a POST request to my backend route). In Selenium/Capybara, I can use syntax like allow_any_instance_of(...).to receive(..) to mock such functions, but I'm unsure how to do this with TestCafe.

I've already successfully mocked the random function in my Game model tests, but now need to replicate this at the UI level with TestCafe. Here's my backend route code:

router.post('/', function(req, res, next) { 
  let choice = req.body.choice, 
      game = new Game( choice, random ), 
      houseChoice = '', 
      result = game.calcWinner( random ); 
  houseChoice = game.houseChoice; 
  res.render('rps', { 
    choice: choice, 
    first_name: first_name, 
    last_name: last_name, 
    random: houseChoice, 
    result: result 
  }); 
});

Answer: #

Great question! TestCafe operates as a browser-based UI testing tool, which means it doesn't have direct access to your backend Node.js code (unlike Capybara, which runs in the same environment as your backend). That said, there are two reliable approaches to mock the random function's return value for your UI tests:

1. Add Test-Specific Logic to Your Backend Route

The most straightforward method is to modify your backend to accept a mock random value when running in a test environment. This lets you control the random output directly from your TestCafe test.

Here's how to adjust your route:

router.post('/', function(req, res, next) { 
  let choice = req.body.choice;
  
  // Check if we're in a test environment, and if a mock random value is provided
  const isTestEnv = process.env.NODE_ENV === 'test';
  const mockRandomValue = req.body.mockRandom;
  
  // Use the mock value if available, otherwise fall back to the real random function
  const randomFunc = isTestEnv && mockRandomValue !== undefined 
    ? () => mockRandomValue 
    : random;
  
  let game = new Game( choice, randomFunc ), 
      houseChoice = '', 
      result = game.calcWinner( randomFunc ); 
  houseChoice = game.houseChoice; 
  res.render('rps', { 
    choice: choice, 
    first_name: first_name, 
    last_name: last_name, 
    random: houseChoice, 
    result: result 
  }); 
});

Then, in your TestCafe test, you can inject the mock random value into the POST request body using a request hook:

import { Selector, RequestHook } from 'testcafe';

// Create a hook to modify the POST request body
class MockRandomHook extends RequestHook {
  constructor() {
    super('http://your-server-url/', { includeBody: true });
  }

  async onRequest(req) {
    if (req.method === 'POST') {
      // Parse the existing request body
      const body = JSON.parse(req.body);
      // Add your mock random value (e.g., 'paper')
      body.mockRandom = 'paper';
      // Stringify the modified body back into the request
      req.body = JSON.stringify(body);
    }
  }
}

fixture`Rock Paper Scissors UI Test`
  .requestHooks(new MockRandomHook())
  .page('http://your-app-url/');

test('Mock random function to force house choice of paper', async t => {
  await t
    .typeText('#choice-input', 'rock')
    .click('#submit-button');

  // Verify the UI shows the expected results
  await t
    .expect(Selector('#house-choice').innerText).eql('paper')
    .expect(Selector('#result').innerText).eql('lose');
});

2. Intercept and Modify the Backend Response

If you don't want to modify your backend code, you can use TestCafe's request hooks to intercept the POST response and overwrite the rendered data (like houseChoice and result) before it reaches the browser.

This works well for both JSON and rendered HTML responses:

import { Selector, RequestHook } from 'testcafe';

class ModifyGameResponseHook extends RequestHook {
  constructor() {
    super('http://your-server-url/', { includeBody: true });
  }

  async onResponse(res) {
    // For JSON responses: parse, modify, then re-encode
    const responseData = JSON.parse(res.body.toString());
    responseData.random = 'scissors'; // Mock house choice
    responseData.result = 'win'; // Mock result
    res.body = Buffer.from(JSON.stringify(responseData));

    // For rendered HTML: replace specific values in the page content
    // const html = res.body.toString().replace('{{random}}', 'scissors').replace('{{result}}', 'win');
    // res.body = Buffer.from(html);
  }
}

fixture`Rock Paper Scissors UI Test`
  .requestHooks(new ModifyGameResponseHook())
  .page('http://your-app-url/');

test('Modify response to mock game results', async t => {
  await t
    .click('#submit-button')
    .expect(Selector('#house-choice').innerText).eql('scissors')
    .expect(Selector('#result').innerText).eql('win');
});

Key Takeaway: #

TestCafe can't directly mock backend Node.js functions like Capybara does, but by either adding test-specific backend logic or intercepting request/response data, you can fully control the random function's output for your UI tests.

内容的提问来源于stack exchange，提问作者Konrad