簡體   English   中英

我怎么能模擬阿波羅與 graphQL 的連接來開玩笑測試?

[英]How could I mock a connection in apollo with graphQL to test in jest?

我正在嘗試以某種方式測試使用 Apollo 客戶端連接條目和 GraphQL 的掛鈎文件:

查看錯誤:

 Invariant Violation: Could not find "store" in either the context or props of "Connect(withRouter(Apollo(Connect(SearchResults))))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(withRouter(Apollo(Connect(SearchResults))))".

我的測試文件:

我可以澄清的一條信息是模擬組件,在這種情況下,我從反應本身建議的 model 中獲取它。

import React from 'react'
import { mount } from 'enzyme'
import SearchResults from './Searchresults'
import { BrowserRouter as Router } from 'react-router-dom'
import { MockedProvider } from 'react-apollo/test-utils'
import { graphql,  compose } from 'react-apollo'
import gql from 'graphql-tag'
import { connect } from 'react-redux'

describe('SearchResults', () => {

  const searchBookWithFiltersQuery = gql`query SearchBookWithFiltersQuery( 
      $searchTerm: String!) { 
         ... 
          }`

  const ComposeComponent = compose(
  graphql(searchBookWithFiltersQuery, {
    options: ({ match, location }) => ({
      variables: {
        searchTerm: searchTerm,
        opts:prepare_opts(location.search),
        page: 1
      }
    })
  }),
  connect(mapStateToProps))(SearchResults)

  it('should render the given tourTitle', () => {

    let mocks = []
    const page_filter = mount(
      <Router>
        <MockedProvider mocks={mocks} addTypename={false}>
            <ComposeComponent props={props} />
        </MockedProvider>
      </Router>
    ).find(page_filter.tourTitle)

    expect(page_filter.text()).toBe(page_filter.tourTitle)
  })

})

我終於找到了解決問題的方法:

import { MockedProvider } from 'react-apollo/test-utils'
import { Router } from 'react-router-dom'
import { searchBookWithFiltersQuery } from 'api/queries'

describe('SearchResults', () => {
  const customHistory = createBrowserHistory()
  const mockStore = configureMockStore()
  const store = mockStore({
    user: {
          id: 1
    }
  })

  it('should render the given sidebar filter wrapper results', () => {
    let mocks = [
      {
        request: {
          query: searchBookWithFiltersQuery
        },
        result: {
          data: {
             [{"id":1,
                "title":"text 1"
              }, {
              {"id":2,
                "title":"text 2"
              }]
            }
          }
        }
      }
    ]
    const search = mount(
      <MockedProvider store={store} mocks={mocks} addTypename={false}>
        <Router history={customHistory}>
          <SearchResults />
        </Router>
      </MockedProvider>
    )
    expect(search.containsMatchingElement(<SideBarFilterWrapper />)).toEqual(
      true
    )
  })

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM