ReactJS/JestJS/Enzyme: 如何测试 compose() 中使用的 graphql() 函数?
ReactJS/JestJS/Enzyme: How to test graphql() function used in compose()?
这就是我通过 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)
})
})
据我所知,您的测试没有正确测试 apollo 位。现在您正在测试 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"
]
}
}
这就是我通过 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)
})
})
据我所知,您的测试没有正确测试 apollo 位。现在您正在测试 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"
]
}
}