Question

我正在遵循Apollo GraphQL提供的docs，用于使用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 renderer进行了尝试，并且得到了相同的结果（错误状态）。

Apollo GraphQL React-使用MockedProvider测试变异

0 个答案: