1

我在完全覆盖我的 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% 覆盖的唯一方法是导出所有函数并直接调用它们。

4

1 回答 1

0

测试组成的 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)
  })
})
于 2017-09-21T16:29:09.947 回答