我可以在不访问 GUI 的情况下测试我的 pinia 商店并使用 cypress 拦截 URL 吗?

问题描述 投票:0回答:1

我想测试我的 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"
}
vue.js cypress cypress-intercept
1个回答
0
投票

等待拦截可能比在操作调用后直接断言更好。

我的测试代码没有问题,但这可能取决于提取后发生的处理量(在操作中)。

有一个示例 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"}
]

柏树原木

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.