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

Question

我使用 Relay/NextJs 创建了一些组件，我阅读了应用测试的文档： https ://relay.dev/docs/en/testing-relay-components，我尝试为 Fragment Container Tests 创建测试，使用 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()
  })
})

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

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

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

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

感谢你的帮助

Answer 1

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

• 创建模拟环境
• 模拟PayloadGenerator

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

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

用例子检查这篇文章： 如何使用relay-test-utils和react-testing-library测试你的继电器组件