@env-phopper/test-kit (英语)

为Env Hopper进行整合测试. renderApp() 挂载真实 App —— 说 真实路由器, 真实客户端 DB, 真实的查询客户端 – 相对于模拟后端服务 并用后页的物体来驱动它.

它的存在是为了让行为独立于UI 执行它。 一个场景说"一个环境和资源决心 一个跳跃 url";只有页面对象在 src/tools 知道是什么元素吗? 替换 然后,UI意味着重新指定页面对象,而不是重写情景.

用这个

// vite.config.ts
import { quickpickle } from 'quickpickle'

export default defineConfig({
  plugins: [viteReact(), svgr(), quickpickle()],
  resolve: {
    // Resolve the cores from source, so nothing needs building first.
    conditions: ['my-custom-condition'],
    alias: { '~': path.resolve(__dirname, '../frontend-core/src') },
  },
  test: {
    environment: 'jsdom',
    environmentOptions: { jsdom: { url: 'http://localhost:3000' } },
    include: ['**/*.feature', '**/*.test.ts', '**/*.test.tsx'],
    setupFiles: ['@env-hopper/test-kit/setup', '@env-hopper/test-kit/cucumber'],
  },
})

三个切入点:

在类型脚本中写入方案

const { ui } = await renderApp({ server, initialLink: '/env/dev/app/app1' })

expect(ui.resourceJump.jumps.getUrl('App1')).toBe('http://localhost:4000/env/dev/app/app1')

在 Gherkin 中写一个

Given the "car shop" catalog opened at "/env/dev/app/parts-inventory"
Then the "Parts Inventory" jump goes to "http://localhost:4000/env/dev/app/parts-inventory"

带上自己的目录

这里的固定装置是发明的样本数据. 下游回波重用该步骤 逐字逐字地对照它自己的定义,用它的名称登记固定字 .feature 文件然后请求:

import { registerCatalog } from '@env-hopper/test-kit/cucumber'

registerCatalog('production', {
  envs: [{ slug: 'dev' }, { slug: 'prod' }],
  apps: [{ slug: 'billing', resourceJumps: '2-pager' }],
})

Given the "production" catalog opened at "/env/prod/app/billing"

命名环境和应用程序; 映射器将其扩展为每个后端 形状前端读取。 A 类 2-pager 也有第二页的用户需要 键入的值,这就是晚解参数路径如何被覆盖.

本地运行应用程序

任何关于外观的东西都需要一个真实的浏览器,它排除了绳子: jsdom 无法看到造型, msw 答案会在测试过程中获取, 所以 浏览器本身也从未达到它. 有两种方法可以让真正的UI在你面前 时间 localhost不需要部署.

面对真正的后端

最好的数据是后端实际生成的数据. 下游开始 本地端后端,然后通过dev服务器的代理端将前端指向它:

EH_API_PORT=4002 VITE_EH_API_URL=/api/trpc pnpm run dev:x

一个亲戚 VITE_EH_API_URL 保持请求来源相同, 所以代理 转发它 —— 这意味着后端发送没有 CORS 头, 对于一个正常 期待坐在它自己的静态服务器后,工作不变.

在模拟后端

src/dev-server/serveMockBackend.ts 都一样 BackendData 处理器 在端口上服务,所以不需要数据库或后端:

pnpm run dev:local     # from the repository root

启动模拟后端 :4000 并打开前端 dev 服务器 :3999。 。 。 . 无论哪种方式,编辑一个组件都是重新装入页面,而不是部署.

重放抓取的目录

样本定型是3个应用, 足够一个情景,但还不够 以看到布局坚挺. capture-fixture.mjs 记录两个有效载荷 运行后端——本地端是明显的选择——和模拟后端 重放它们,所以环线会继续下线:

EH_ORIGIN=http://localhost:4002 EH_FIXTURE_DIR=~/eh-fixture \
  node packages/test-kit/scripts/capture-fixture.mjs

EH_FIXTURE_DIR=~/eh-fixture pnpm run dev:local

捕捉器将每个暗视值替换为 REDACTED 在同一通行证中 作为下载——原始回复从不写入磁盘——并打印如何 许多键,它编辑。 钥匙留下,所以一个证书面板仍然可以.

保留 EH_FIXTURE_DIR 此仓库外一个真正的目录名称 后端自己的主机和环境,这个寄存器是公开的. 还没有, dev:local 服务于样本固定,所以默认不花费什么.

它没有覆盖

jsdom没有布局引擎,也没有CSS,因此这里没有任何东西可以看见有型.