时间戳

首页 > 解决方案 > 使用“relay-test-utils”测试反应组件

javascript - 使用“relay-test-utils”测试反应组件

问题描述

我使用 Relay/NextJs 创建了一些组件，我阅读了应用测试的文档：https ://relay.dev/docs/en/testing-relay-components，我已经尝试为片段容器测试创建测试，使用 Mock Payload Generator 和 @relay_test_operation 指令：

import SearchPageContainer from '../components/SearchPageContainer'
import ReactTestRenderer from 'react-test-renderer'
import { QueryRenderer, graphql } from 'react-relay'
import {
  createMockEnvironment,
  MockPayloadGenerator,
  generateAndCompile
} from 'relay-test-utils'

describe('SearchPageContainer', () => {
  let testComponent
  let environment

  beforeEach(() => {
    environment = createMockEnvironment()
    const TestRenderer = () => (
      <QueryRenderer
        environment={environment}
        query={graphql`
        query TestQuery @relay_test_operation {
          view: node(id: "test-id") {
            ...MyConnectionFragment
          }
        }
      `}
        variables={{}}
        render={({ error, props }) => {
          if (props) {
            return <SearchPageContainer view={props} />
          } else if (error) {
            return error.message
          }
          return 'Loading...'
        }}
      />
    )
    ReactTestRenderer.act(() => {
      testComponent = ReactTestRenderer.create(<TestRenderer />)
    })
  })
  it('should have pending operations in the queue', () => {
    expect(environment.mock.getAllOperations().length).toEqual(1)
  })
  it('should resolve query', () => {
    environment.mock.resolveMostRecentOperation(operation =>
      MockPayloadGenerator.generate(operation)
    )
    expect(testComponent).toMatchSnapshot()
  })
})

我有这个错误：中继转换错误：您提供了一个名为nodetype的字段Query，但该类型上不存在这样的字段。

我在 .babelrc 中的配置是这样的：

{
    "presets": [
      "next/babel",
    ],
    "plugins": [
      ["relay", {"compat": true, "schema": "schema/schema.json"}],
    ]
}

我不知道我是否需要一些额外的配置才能让这个 @relay_test_operation 指令有效，

感谢你的帮助

标签： javascriptreactjsgraphqlrelayrelaymodern

解决方案

您将喜欢在测试中使用两个主要模块：

  • createMockEnvironment
  • 模拟有效载荷生成器

createMockEnvironment只不过是中继环境接口的一个实现，它还有一个附加的模拟层，具有允许解析/拒绝和控制操作（查询/突变/订阅）的方法。它是一个特殊版本的中继环境，带有用于控制解析和拒绝操作的附加 API 方法。因此我们应该做的第一件事就是告诉 jest 我们不想要默认环境，而是我们的环境由 relay-test-utils 提供。

这mockPayloadGenerator是为了改进为测试组件创建和维护模拟数据的过程，它可以为您在操作中的选择生成虚拟数据。

用示例查看这篇文章：如何使用 relay-test-utils 和 react-testing-library 测试你的中继组件

推荐阅读