我想测试我的 pinia 存储操作结果 - 正确的错误抛出,以及 cypress 的其他行为。
因此我想拦截我的 api 端点。
由于我的拦截,我得到了一个 html 结果,在任何其他情况下我都找不到:
api调用结果:(punchline不是我预期的固定装置,而是来自cypress的错误脚本)
<html>
<head>
<meta charset="utf-8">
<title>integration/undefined/api/resource1/1/resource2</title>
</head>
<body>
<script type="text/javascript">
document.domain = **'localhost'**;
(function(parent) {
var Cypress = window.Cypress = parent.Cypress;
if (!Cypress) {
throw new Error("Tests cannot run without a reference to Cypress!");
}
return Cypress.onSpecWindow(window, [{"absolute":"/***/tests/e2e/support/index.js","relative":"tests/e2e/support/index.js","relativeUrl":"/__cypress/tests?p=tests/e2e/support/index.js"},{"absolute":"tests/e2e/specs/undefined/api/resource1/1/resource2","relative":"tests/e2e/specs/undefined/api/resource1/1/resource2","relativeUrl":"/__cypress/tests?p=tests/e2e/specs/undefined/api/resource1/1/resource2"}]);
})(window.opener || window.parent);
</script>
</body>
</html>
我的期望是这一行包含最多的信息,但我没有找到任何关于该
integratoion/undefined
部分的信息。
<title>integration/undefined/api/resource1/1/resource2</title>
这是我的测试文件:
你可以看到我不打电话
cy.visit("/")
(这是一个问题吗?)
import { createPinia, setActivePinia } from 'pinia'
import {useRes2Store} from "@/store/resources/res2Store";
describe('Res2 Store', () => {
beforeEach(() => {
const pinia = createPinia()
setActivePinia(pinia)
cy.fixture('res.json').as('res2')
cy.intercept('GET', '/api/resource1/1/resource2', {fixture: 'res.json'})
})
it('Call the tagStore action to get res2 items to a res1', () => {
const res2Store = useRes2Store() // Store initialisieren
cy.wrap(res2Store.getRes2(1)).then(() => {
cy.get('@res2').then((res2) => {
expect(res2Store.res).to.deep.equal(res2)
})
})
})
})
我尝试查找配置参数。我需要设置任何 .env.test 文件吗?
我检查了装置是否正常工作
我看到,在cypress测试的控制台中,发送了get请求
可悲的是:
http://localhost:8080/__cypress/iframes/integration/undefined/api/resource1/1/resource2
端口 8080 是 vuejs 应用程序本身:
App running at:
- Local: http://localhost:8080/
我的柏树配置:
{
"pluginsFile": "tests/e2e/plugins/index.js"
}
等待拦截可能比在操作调用后直接断言更好。
我的测试代码没有问题,但这可能取决于提取后发生的处理量(在操作中)。
有一个示例 Pina 应用程序 lmiller1990/pinia-example 我下载了它并更新到最新的 Vue/Pinia。
它有一个
products
存储,其中包含从 fetchAll()
获取的 window.fetch('http://localhost:8080/products')
操作,但我没有启动服务器,因为测试拦截并模拟了响应。
修改测试
import { createPinia, setActivePinia } from 'pinia'
import { useProductStore } from '../../src/store/products'
describe('Products Store', () => {
beforeEach(function() {
const pinia = createPinia()
setActivePinia(pinia)
cy.fixture('products.json').as('products')
cy.intercept('http://localhost:8080/products', {fixture: 'products.json'})
.as('pinia')
})
it('Call the tagStore action to get res2 items to a res1', () => {
const productsStore = useProductStore()
cy.then(() => productsStore.fetchAll())
cy.wait('@pinia').then(() => {
cy.get('@products').then(products => {
const all = productsStore.all
expect(all['1']).to.deep.eq(products[0])
expect(all['2']).to.deep.eq(products[1])
})
})
})
})
products.json 夹具
[
{"id":"1", "name":"cypress"},
{"id":"2", "name":"pinia"}
]
柏树原木