javascript - ReactJS/JestJS/ enzyme : How to test graphql() function used in compose()?

Question

这就是我通过 jestJS 使用 React-apollo 测试一个非常简单的 ReactJS 组件的方式。我也在使用 jest 的覆盖功能。

但报道显示，我缺少测试 graphql() 中的 options: (props) => ({ 行)。

我应该如何正确地执行此操作？

示例.js

import React, { Component } from 'react'
import { graphql, compose } from 'react-apollo'
import { getPostsQuery } from './graphql/query'

export class Example extends Component {
  render () {
    const { data } = this.props
    const { getPosts, loading } = data

    return (
      <div id="article">
        {
          getPosts.map(post => {
            return (<div>{post.content}</div>)
          })
        }
      </div>
    )
  }
}

export default compose(
  graphql(
    getPostsQuery, {
      options: (props) => ({
        variables: {
          articleId: props.articleId
        }
      })
    }
  )
)(Example)

单元测试

import React from 'react'
import { shallow } from 'enzyme'
import { Example } from './components/Example'

describe('<Example />', () => {
  it('should render #article element', () => {
    wrapper = shallow(<Example data={data} />)
    expect(wrapper.find('#article')).toHaveLength(1)
  })
})

Answer 1

据我所知，您的测试没有正确测试 Apollo 位。现在您正在测试 React 是否能够渲染 div。这是因为您仅导入该组件，而不是其增强版本。如果您想涵盖所有内容，则必须从'./components/Example'导入示例。但是接下来你会遇到另一个关于模拟 apollo 服务器的问题。这是一篇关于该主题的好文章 https://medium.com/@carlos_42328/mocking-api-responses-with-react-apollo-11eb4610debe

另一个选项是使用 Jest 的 coveragePathIgnorePatterns 选项，如下所示:

示例.js

import React, { Component } from 'react'
import { graphql, compose } from 'react-apollo'
import { getPostsQuery } from './graphql/query'

export default class Example extends Component {
  render () {
    const { data } = this.props
    const { getPosts, loading } = data

    return (
      <div id="article">
        {
          getPosts.map(post => {
            return (<div>{post.content}</div>)
          })
        }
      </div>
    )
  }
}

示例组合.js

import Example from './Example';

export default compose(
  graphql(
    getPostsQuery, {
      options: (props) => ({
        variables: {
          articleId: props.articleId
        }
      })
    }
  )
)(Example)

然后在您的 package.json 文件中

{
  "jest": {
    "coveragePathIgnorePatterns": [
      "./node_modules",
      "./path/to/file/ExampleComposed.js"
    ]
  }
}