Question

我尝试了几种方法来模拟我的代码的这一部分，但是仍然行不通。我正在使用create-react-app和jest进行测试。

我在admin adminSignup.js 中具有将数据发送到服务器（Node.js和Mongoose）以创建帐户的功能：

...
change_every_x_milliseconds = 3000.
step = 0

running = True
while running:

    ...

    if step < change_every_x_milliseconds:
        current_color = [x + (((y-x)/change_every_x_milliseconds)*step) for x, y in zip(pygame.color.Color(base_color), pygame.color.Color(next_color))]
    else:
        ...
    ...

    pygame.display.update()
    step += clock.tick(60)

并且我已经在我的组件（ RegisterPage.jsx ）中调用了此命令：

/* eslint-disable no-undef */
 function signup(user, cb) {
 return fetch(`signup`, {
  headers: {"Content-Type": "application/json"},
  method: "POST",
  body:JSON.stringify({
    username: user.username,
    email: user.email,
    password: user.password,
    picode: user.pincode,
    building: user.building,
    city: user.city,
    state: user.state
        }),
})
  .then(checkStatus)
  .then(parseJSON)
  .then(cb)
  .catch(err => console.log(err));
}

function checkStatus(response) {
 if (response.status >= 200 && response.status < 300) {
  return response;
}
const error = new Error(`HTTP Error ${response.statusText}`);
error.status = response.statusText;
error.response = response;
console.log(error); // eslint-disable-line no-console
throw error;
}

function parseJSON(response) {
return response.json();
}

const adminSignup = { signup };
export default adminSignup;

现在，我想为我的注册调用（ adminSignup.js ）写一个模拟文件。但是只是想知道我该怎么做？

我已经尝试 Jest Fetch Mock 进行模拟测试（不需要创建模拟文件），并且可以正常工作，但是我不确定它是否正确：

adminSignup.signup( user, response => {
                         this.setState({response: response});
                         console.log(response);
                   });

我真的很想创建一个模拟文件并使用它进行测试，但是阅读开玩笑的网站对我来说不起作用。

谢谢。

Answer 1

我发现这种方式（使用模拟HTTP服务器）可用于另一个 POST 请求，它对我有用：

userList.js：

async function getUser (id, cb) {

const response =  await fetch(`/getUserById/${id}`, {
  // headers: {"Content-Type": "application/json"},
  method: "POST",
  body:JSON.stringify({
    id : id
        }),
})
   .then(checkStatus)
   .then(parseJSON)
   .then(cb)
   .catch(err => console.log(err));

const user = response.json();
return user;

 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
   }
   const error = new Error(`HTTP Error ${response.statusText}`);
   error.status = response.statusText;
   error.response = response;
   console.log(error); // eslint-disable-line no-console
   throw error;
 }

 function parseJSON(response) {
   return response.json();
 }
}

userList.test.js：

import ServerMock from "mock-http-server";
import userLists from '../components/UserList/userLists';

describe('Test with mock-http-server', function() {

// Run an HTTP server on localhost:3000
var server = new ServerMock({ host: "localhost", port: 3000 });

beforeEach(function(done) {
  server.start(done);
});

afterEach(function(done) {
  server.stop(done);
});

it('should do something',  function(done) {
  var id = 4;
    server.on({
      method: 'POST',
      path: `/getUserById/${id}`,
      reply: {
          status:  200,
          headers: { "content-type": "application/json" },
          body:    JSON.stringify({ id: 4 })
      }
  });
  // Now the server mock will handle a GET http://localhost:3000//getUserById/${id}
  // and will reply with 200 `{"id": 4}`
  function cb(data) {
          console.log(data);
          expect(data).toBe({name:'Bob'}); 
          done();
      }
  const response =  userLists.getUser(4, cb);
  console.log(response);


  done();
});

我如何为该代码进行Jest API测试？

1 个答案: