今天我們來針對API call來進行模擬，因為測試畫面不一定都只是點選之類的模擬測試，這時候我們可能需要透過axios或者是fetch的方式取得server回傳的資料進行驗證，這時候我們可以透過cy.server(v6.0之前)與cy.intercept(v6.0之後)的方式設定回傳的statusCode以及資料．

improt axios from 'axios'

const handleSubmit = async () => {
	const res = await axios.post('url', body);
	const { data, status } = data;
	
	if (status === '200') {
		history.push('/rooms')
	}	
}

我們可能可以使用cy.server的方式建立一個server mock一個回傳的資料

it('should return login success', () => {
    cy.server().route({
      url: 'http://localhost:3001/login',
      method: 'POST',
      status: 200,
      response: {
        success: true
      }
    });
  });

讓回傳的資料，是正確的.然後上面的範例是6.0之前的版本，再來我們來看v6.0之後出的intercept(攔截器)

cy.intercept('POST', '**/login', {
      success: true
  }).as('loginAuth');

cy.visit('/')
  .get('[role="account"]')
  .type('123')
  .get('[role="password"]')
  .type('123')
  .get('button')
  .click();

cy.wait('@loginAuth');
cy.url().should('eq', 'http://localhost:3001/rooms');

在這邊我們可以設定一個API Call的攔截器，並且回傳success: true

這時我們可以透過cy.wait的方式等待API回傳資料完成，並且確認url來到正確的位置

.as主要是給一個action的alias，當我們用as取名之後，可以使用@加上alias我們就可以取用那個定義

參考文獻:

1. https://docs.cypress.io/api/commands/as#Syntax