如何测试graphql apollo组件？如何在 compose() 中获得完整的覆盖？答案

【问题标题】：How to test graphql apollo component? How to get complete coverage inside compose()?如何测试graphql apollo组件？如何在 compose() 中获得完整的覆盖？
【发布时间】：2017-09-05 22:35:37
【问题描述】：

我在完全覆盖我的 apollo 组件时遇到问题。伊斯坦布尔报告 compose() 内部的函数没有被调用。这些是 Redux connect() 函数和 apollo graph() 函数。

export default compose (
...
connect(mapStateToProps, mapDispatchToProps), // <-- functions not covered
graphql(builderQuery, {
    options: (ownProps) => { // <-- function not covered
...
)(ComponentName);

我正在使用酶进行安装，尝试执行类似于 react-apollo 示例的操作。

const mounted = shallow(
        <MockedProvider mocks={[
            { request: { query, variables }, result: { data: response.data } }
        ]}>
            <ConnectedComponentName />
        </MockedProvider>
    );

我能够实现 100% 覆盖率的唯一方法是导出所有函数并直接调用它们。

【问题讨论】：

我正在尝试使用来自 redux-test-utils 的 createMockStore 和 react-apollo 示例。 createMockStore 允许您针对给定的商店测试您的容器并让您触发您的调度。当前的问题是模拟存储不能与 mount() 一起使用。并且带有 dip() 的 shallow() 以某种方式将客户端从上下文中删除。如果您有更多信息，请告诉我。
@ChrisKong 我认为浅安装不再正确。如果可能的话，尝试做一个完整的安装。我发现这些实用程序不是很有用，尤其是当您开始需要测试 update 和 updateQueries 时。

标签： redux graphql enzyme istanbul react-apollo

【解决方案1】：

测试组合的 graphql/redux 容器

尝试这样的设置：

// mocks.js
import configureMockStore from 'redux-mock-store'

import { ApolloClient } from 'react-apollo'
import { mockNetworkInterface } from 'apollo-test-utils'

export const mockApolloClient = new ApolloClient({
  networkInterface: mockNetworkInterface(),
})

export const createMockStore = configureMockStore()

这将使您能够正确测试您的容器：

// container-test.js
import { mount } from 'enzyme'
import { createMockStore, mockApolloClient } from 'mocks'

beforeEach(() => {
  store = createMockStore(initialState)
  wrapper = mount(
    <ApolloProvider client={mockApolloClient} store={store}>
      <Container />
    </ApolloProvider>
  )
})

it('maps state & dispatch to props', () => {
  const props = wrapper.find('SearchResults').props()
  const expected = expect.arrayContaining([
    // These props come from an HOC returning my grapqhql composition
    'selectedListing',
    'selectedPin',
    'pathname',
    'query',
    'bbox',
    'pageNumber',
    'locationSlug',
    'selectListing',
    'updateCriteria',
    'selectPin',
  ])
  const actual = Object.keys(props)
  expect(actual).toEqual(expected)
})

测试 graphql 选项

由于 graphql fn 具有类似 graphql(query, config) 的签名，因此您可以导出配置以单独进行测试以获得更精细的覆盖范围。

import { config } from '../someQuery/config'

describe('config.options', () => {
  const state = {
    bbox: [],
    locationSlug: 'foo',
    priceRange: 'bar',
    refinements: 'baz',
    userSort: 'buzz',
  }

  const results = {
    points: [
      { propertyName: 'Foo' },
      { propertyName: 'Bar' },
    ],
    properties: [
      { propertyName: 'Foo' },
      { propertyName: 'Bar' },
    ],
  }

  it('maps input to variables', () => {
    const { variables } = config.options(state)
    const expected = { bbox: [], locationSlug: 'foo', priceRange: 'bar', refinements: 'baz', userSort: 'buzz' }
    expect(variables).toEqual(expected)
  })

  it('returns props', () => {
    const response = { data: { loading: false, geo: { results } } }
    const props = config.props(response)
    expect(props.results).toEqual(results.properties)
    expect(props.spotlightPoints).toEqual(results.points)
  })
})

【讨论】：