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

Posted 2023-03-08

【中文标题】如何测试graphql apollo组件？如何在 compose() 中获得完整的覆盖？

【英文标题】：How to test graphql apollo component? How to get complete coverage inside 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 时。

【参考方案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)
  )
)