如何使用Cypress对React进行测试

一、安装及启动

• 使用 npm 下载

npm install cypress --save-dev

• open cypress
  在 package.json 添加 Cypress commands

// package.json
{
	"scripts": {
		"test": "cypress open"
	}
}

// 在终端中运行
npm run test

二、测试类型

1. Component Testing

2. E2E Testing

三、常用API

• cy.mount(组件) 挂载 react 组件
• cy.get(元素选择器) 获取 dom 元素
• dom元素.should('have,text'， '内容') 判断元素是否显示对应文字内容
• 测试函数是否被正确调用
  const handleTest = cy.spy().as('alias')
cy.get('@alias').should('have.been.calledWith', param)

import {MyTest} from './myTest.jsx'

it('click button fires a change event', ()=> {
	const handleTest = cy.spy().as('alias')
	cy.mount(<MyTest onChange={handleTest}/>)
	cy.get('.myButton').click() // 触发点击
	cy.get('@alias').should('have.been.calledWith', 1)
	
}

component 测试

import ListCard from '../component/ListCard.jsx'

describe('Test of UserLogin',function(){
	const list = {
		
	}

    it('is host:',function(){
        cy.mount(<ListCard list={list} isHost={true}/>)
        
    })
    
})

UI Test

import 'cypress-file-upload'

describe('UI Test', () => {
  it('happy path', () => {
    // register
    cy.visit('http://localhost:3000/register')
    cy.get('.user_title').should('have.text', 'Create an Account')
    cy.get('#email').type('test@test.com')
    cy.get('#name').type('test')
    cy.get('#password').type('123')
    cy.get('#confirmPass').type('123')
    cy.get('.user_button').click()
    cy.wait(1000)
    cy.url().should('include', '/login')

    // login
    cy.get('#email').type('test@test.com')
    cy.get('#password').type('123')
    cy.get('.user_button').click()
    cy.url().should('include', '/list/all')

    // to Host
    cy.contains('Hosted Listings').click()
    cy.url().should('include', '/list/hosted')

    // create list
    cy.get('.create_list_btn').click()
    cy.get('.ant-modal-header .ant-modal-title').should('have.text', 'Create Listing')

    cy.get('input[data-testid="title"]').type('just for test')
    cy.get('input[data-testid="country"]').type('Country')
    cy.get('input[data-testid="state"]').type('State')
    cy.get('input[data-testid="city"]').type('City')
    cy.get('input[data-testid="street"]').type('Street')
    cy.get('input[data-testid="type"]').type('Type')
    cy.get('input[data-testid="bathrooms"]').type(1)
    cy.get('input[data-testid="bedrooms"]').type(2)
    cy.get('input[data-testid="price"]').type(99999)
    cy.get('input[data-testid="amenities"]').type('Amenities')
    cy.get('input[data-testid="upload"]').attachFile('test.png')
    cy.wait(1000)
    cy.contains('OK').click()

    // update
    cy.contains('Edit').click()
    cy.get('input[data-testid="title"]').clear()
    cy.get('input[data-testid="title"]').type('update title')
    cy.get('input[data-testid="upload"]').attachFile('update.png')
    cy.wait(1000)
    cy.get('.user_button').click()

    // publish
    cy.contains('Publish').click()
    cy.contains('Add field').click()
    cy.get('#dynamic_form_nest_item_availability_0_range').type('2023-11-15', { force: true })
    // input怎么获取
    cy.contains('input[placeholder="End date"]').type('2023-11-18', { force: true })
    cy.contains('Submit').click()

    // unPublish
    cy.contains('unPublish').click()
    cy.wait(500)
    cy.contains('publish')

	// to all list
	cy.contains('All Listings').click()
	cy.contains('View').first().click()
	
	// book, 还需要关闭，如何获取x
	cy.get('button').contain('Book').click()
	cy.get('button').contains('book').click()

	// log out
	cy.contains('Log Out').click()
	
	// login
	cy.get('#email').type('test@test.com')
    cy.get('#password').type('123')
    cy.get('.user_button').click()
    cy.url().should('include', '/list/all')
  })
})