Question

我已经使用React with Relay / NextJs创建了一些组件，我阅读了应用测试的文档：https://relay.dev/docs/en/testing-relay-components，已经尝试过使用模拟有效载荷生成器和@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()
  })
})

我遇到此错误：中继转换错误：您提供了类型为node的名为Query的字段，但是该类型不存在此类字段。

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

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

我不知道我是否需要一些额外的配置才能使此@relay_test_operation指令起作用

感谢您的帮助

Answer 1

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

createMockEnvironment
mockPayloadGenerator

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

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

通过示例查看此信息：How to test your relay components with relay-test-utils and react-testing-library

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

1 个答案: