1

我正在关注 Apollo GraphQL 提供的文档，用于使用 MockedProvider 测试 React 组件突变。

在我正在使用的应用程序中，recompose styled-components react apollo-client react-apollo 我使用jest和enzyme

我使用 MockedProvider 创建了模拟查询并成功测试了我的组件。但是，我无法让突变测试正常工作。我的组件一直显示 HTML 的错误状态，而不是显示 OK 状态。

注意：通过 compose，我<TestKey/>将组件与处理函数以及将有条件地呈现的加载和错误状态组合在一起。

按照文档（上面链接），我创建了一个类似于此的测试：

零件

const Key = ({
  className,
  columns,
  title,
  data,
  type,
  onClick,
  paginate,
  error,
  info,
}) => (
  <div className={className}>
    <div className="tableHeader">
      <h4>{title}</h4>
      <Wrapper>
        <Tooltip
          title={`What are ${title}?`}
          content={[<TooltipContent key={title}>{info}</TooltipContent>]}
          trigger="hover"
          keyid={title}
        />
      </Wrapper>
      <Button type="primary" onClick={() => onClick(type)}>
        <ButtonIcon type="key" />
        Generate New Key
      </Button>
    </div>
    {error && <Alert type="danger">Error: {error}</Alert>}
    {data.length === 0 ? (
      <NoKeys>There are no {title} generated for this account.</NoKeys>
    ) : (
      <Table
        columns={columns}
        data={data}
        defaultSorted={[
          {
            id: 'insertedAt',
            asc: false,
          },
        ]}
      />
    )}
  </div>
)

突变

const CREATEMUTATION = gql`
    mutation createKey(
      $type: String!
    ) {
      createKey(
        type: $type
      ) {
          id
          token
          type
          insertedAt
        }
      }
`

突变的预期回报

const createKey = {
  id: '4',
  token: 'ucf345',
  type: 'public',
  insertedAt: '2018-06-20 20:42:15.189925',
}

测试

describe('Create Key', () => {
    let tree

    beforeEach(async () => {
      const mockedData = [{
        request: {
          query: CREATEMUTATION,
          variables: { type: 'public' },
        },
        result: {
          data: {
            createKey: createKey,
          },
        },
      }]

      tree = renderer.create(
        <MockedProvider mocks={mockedData} removeTypename={true}>
          <ThemeProvider theme={theme}>
            <TestKey />
          </ThemeProvider>
        </MockedProvider>
      )
    })

****at this step in the test I should be able to call on the button in the component and trigger a click that calls the mutation****
    it('check', () => {
      //errors because it cannot find button
      const button = tree.root.findByProps({type: 'primary'})

      console.log(tree.toJSON().children);
    })
  })
})

CONSOLE.LOG 在终端中返回以下 内容（它显示当我的组件从 GraphQL 收到错误时呈现的内容）

[ { type: 'div',
        props: { className: 'sc-bwzfXH kIOmnc' },
        children: 
         [ [Object],
           'Error connecting to the Platform. Wait for a second and then click the retry button below' ] 
]

我已经尝试过使用 Enzyme 的 mount 而不是 React 的 Test 渲染器，我得到了相同的结果（错误状态）。

4

0 回答 0