ReactJS/JestJS/Enzyme：如何测试 compose() 中使用的 graphql() 函数？

Question

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

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

我应该如何正确地做到这一点？

Example.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

据我所知，您的测试并未正确测试阿波罗位。现在你正在测试 React 是否能够渲染一个 div。那是因为您只导入组件而不是它的增强版本。如果您想涵盖所有内容，请联系import Example from './components/Example'。但是你会遇到另一个关于模拟 apollo 服务器的问题。这是一篇关于该主题的好文章https://medium.com/@carlos_42328/mocking-api-responses-with-react-apollo-11eb4610debe

另一种选择是使用 Jest 的 coveragePathIgnorePatterns 选项，如下所示：

Example.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>
    )
  }
}

ExampleComposed.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"
    ]
  }
}