您可以使用Application actions来解决这个问题,前提是您可以稍微修改应用程序源代码。
应用程序操作为测试提供了一个进入应用程序的挂钩,可用于修改应用程序的内部状态。
我使用setValue
从useState()
钩子公开的 Function 组件对其进行了测试。
您已经使用了 Class 组件,所以我想您会this.updateInput()
改为公开,例如
if (window.Cypress) {
window.app = { updateInput: this.updateInput };
}
应用程序:index.js
import React, { useState } from 'react';
import { render } from 'react-dom';
import './style.css';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
function App() {
const [value, setValue] = useState(20000);
// Expose the setValue() method so that Cypress can set the app state
if (window.Cypress) {
window.app = { setValue };
}
return (
<div className="App">
<Slider
min={5000}
max={40000}
step={500}
value={value}
defaultValue={value}
className="sliderBorrow"
onChange={val => setValue(val)}
data-cy={"input-slider"}
/>
<div style={{ marginTop: 40 }}><b>Selected Value: </b>{value}</div>
</div>
);
}
render(<App />, document.getElementById('root'));
测试:slider.spec.js
我发现在测试中断言值的最简单方法是使用aria-valuenow
滑块句柄的属性,但您可能有另一种方法来测试该值是否在页面上发生了明显变化。
describe('Slider', () => {
it("Changing slider", () => {
cy.visit("localhost:3000");
cy.get('.rc-slider-handle')
.should('have.attr', 'aria-valuenow', 20000)
cy.window().then(win => {
win.app.setValue(35000);
})
cy.get('.rc-slider-handle')
.should('have.attr', 'aria-valuenow', 35000)
})
})