i have a component which uses react-apollo graphql function to query data. i am trying to retrieve mock apollo provider using mocked provider from react-apollo/test-utils. mocked data is not coming in the mocked response.
this is my component.
import React from 'react';
import PropTypes from 'prop-types';
import autoBind from 'react-autobind';
import { Meteor } from 'meteor/meteor';
import { graphql, compose } from 'react-apollo';
import isEqual from 'lodash.isequal';
import moment from 'moment';
import { bookingsSearch } from '../../queries/Bookings.gql';
import ActiveJobListDetail from './ActiveJobListDetail';
import ActiveJob from './ActiveJob';
import TasksDataWrapper from './TasksDataWrapper';
import Styles from './styles';
import BlankState from '../BlankState/index';
class ActiveJobsList extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
taskOwner: null,
};
}
shouldComponentUpdate(nextProps, nextState) {
const { data, userId, dateFrom, dateTo, status } = this.props;
const {
data: nextData,
userId: nextUserId,
dateFrom: nextDateFrom,
dateTo: nextDateTo,
status: nextStatus,
} = nextProps;
const { taskOwner } = this.state;
const { taskOwner: nextTaskOwner } = nextState;
return (
dateFrom !== nextDateFrom ||
dateTo !== nextDateTo ||
userId !== nextUserId ||
taskOwner !== nextTaskOwner ||
status !== nextStatus ||
!isEqual(data.bookingsSearch, nextData.bookingsSearch)
);
}
sortBookingsByDate(bookings) {
return bookings.sort((a, b) => moment(a.date) - moment(b.date));
}
renderActiveJobs() {
const { data } = this.props;
if (data.loading) return null;
const {
data: {
bookingsSearch: { bookings },
},
} = this.props;
const sortedBookings = this.sortBookingsByDate(bookings);
return sortedBookings && sortedBookings.length > 0 ? (
<>
<p data-testid="bookings-desc">
Click on an active task to see the live tracking or click on the completed task to see the
POD.
</p>
{sortedBookings.map((booking) => {
return (
<TasksDataWrapper
key={booking._id}
booking={booking}
render={({ tasks, loading }) => {
return (
<div key={booking._id} className="activejobs-wrapper">
{/* booking detail */}
<ActiveJob booking={booking} firstTask={tasks && tasks[0]} />
{/* tasks against booking */}
<ActiveJobListDetail tasks={tasks} loading={loading} />
</div>
);
}}
/>
);
})}
</>
) : (
<BlankState
icon={{ style: 'solid', symbol: 'calendar-alt' }}
title="No Data Found"
subtitle=""
/>
);
}
render() {
return <Styles.ActiveJobsList>{this.renderActiveJobs()}</Styles.ActiveJobsList>;
}
}
ActiveJobsList.defaultProps = {
dateFrom: null,
dateTo: null,
userId: null,
};
ActiveJobsList.propTypes = {
data: PropTypes.object.isRequired,
userId: PropTypes.string,
dateFrom: PropTypes.string,
dateTo: PropTypes.string,
status: PropTypes.array.isRequired,
};
export default compose(
graphql(bookingsSearch, {
options: ({ userId, dateFrom, dateTo, status }) => ({
variables: {
userId,
dateFrom,
dateTo,
status,
},
pollInterval: Meteor.settings.public.graphQL.pollInterval * 10,
}),
}),
)(ActiveJobsList);
my test goes like…
import React from 'react';
import { render } from '@testing-library/react';
import { MockedProvider } from 'react-apollo/test-utils';
import { bookingsSearch } from '../../../queries/Bookings.gql';
import ActiveJobsList from '..';
import 'regenerator-runtime/runtime';
const mocks = {
request: {
query: bookingsSearch,
variables: {
dateFrom: null,
dateTo: null,
perPage: 10,
search: '',
status: null,
userId: null,
},
},
result: {
data: {
bookingsSearch: {
total: 66239,
dateFrom: null,
dateTo: null,
bookings: [
//..BOOKINGS ARRAY
],
},
},
},
};
const waitForData = () => new Promise((res) => setTimeout(res, 0));
it('renders without error', async () => {
const { getByTestId, debug } = render(
<MockedProvider mocks={[mocks]}>
<ActiveJobsList status={[]} />
</MockedProvider>,
);
await waitForData();
const el = getByTestId('bookings-desc');
expect(el.textContent).toContain(
'Click on an active task to see the live tracking or click on the completed task to see the POD.',
);
});
PACAKGE.JSON
"dependencies": {
"@analytics/google-analytics": "^0.4.0",
"@babel/runtime": "^7.10.5",
"@cleverbeagle/seeder": "^2.0.3",
"@google/maps": "^1.1.3",
"acorn": "^7.3.1",
"analytics": "^0.5.3",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-batch-http": "^1.2.14",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-link-persisted-queries": "^0.2.2",
"apollo-link-retry": "^2.2.16",
"apollo-link-timeout": "^1.4.1",
"apollo-link-ws": "^1.0.20",
"apollo-server-express": "^2.15.1",
"apollo-utilities": "^1.3.4",
"b64-to-blob": "^1.2.19",
"babel-plugin-lodash": "^3.3.4",
"bcrypt": "^5.0.0",
"clipboard-copy": "^3.1.0",
"commonmark": "^0.29.1",
"cordova-ios": "^5.1.1",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"country-data": "0.0.31",
"dd-trace": "^0.28.1",
"eslint-plugin-react-hooks": "^1.7.0",
"file-saver": "^2.0.2",
"google-map-react": "^1.1.7",
"google-polyline": "^1.0.3",
"googleapis": "^39.2.0",
"graphql": "^14.7.0",
"graphql-subscriptions": "^1.1.0",
"graphql-tag": "^2.10.4",
"handlebars": "^4.7.6",
"isomorphic-fetch": "^2.2.1",
"jest-transform-graphql": "^2.1.0",
"jquery": "^3.5.1",
"jquery-validation": "^1.19.2",
"jszip": "^3.5.0",
"juice": "^5.2.0",
"lodash": "^4.17.19",
"lodash.chunk": "^4.2.0",
"lodash.clone": "^4.5.0",
"lodash.difference": "^4.5.0",
"lodash.invert": "^4.3.0",
"lodash.remove": "^4.7.0",
"meteor-node-stubs": "^0.4.1",
"moment": "^2.27.0",
"moment-duration-format": "^2.3.2",
"moment-timezone": "^0.5.31",
"node-fetch": "^2.6.0",
"node-gyp": "^6.0.1",
"node-pre-gyp": "^0.14.0",
"onesignal-node": "^3.0.2",
"polished": "^3.6.5",
"prop-types": "^15.7.2",
"puppeteer": "^5.4.1",
"rc-slider": "^8.7.1",
"react": "^16.13.1",
"react-apollo": "^2.5.8",
"react-autobind": "^1.0.6",
"react-bootstrap": "^0.32.4",
"react-burger-menu": "^2.7.0",
"react-content-loader": "^4.3.4",
"react-csv-reader": "^1.3.1",
"react-day-picker": "^7.4.8",
"react-device-detect": "^1.13.1",
"react-dom": "^16.13.1",
"react-event-timeline": "^1.6.3",
"react-geocode": "^0.1.2",
"react-helmet": "^5.2.1",
"react-iframe": "^1.8.0",
"react-intl-tel-input": "^7.1.1",
"react-markdown": "^4.3.1",
"react-places-autocomplete": "^7.3.0",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.0",
"react-select": "^2.4.4",
"react-sortablejs": "^2.0.11",
"react-stripe-elements": "^2.0.3",
"react-switch": "^5.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"remove": "^0.1.5",
"request": "^2.88.2",
"routific": "0.0.3",
"sanitize-html": "^1.27.0",
"simpl-schema": "^1.8.0",
"sprintf-js": "^1.1.2",
"stripe": "^7.15.0",
"styled-components": "^4.4.1",
"subscriptions-transport-ws": "^0.9.17",
"twilio": "^3.48.0",
"validator": "^11.1.0",
"xero-node": "^4.16.1",
"xml": "^1.0.1"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@testing-library/react": "^12.1.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
"enzyme": "^3.11.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^22.21.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-meteor": "^6.0.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-testcafe": "^0.2.1",
"husky": "^3.1.0",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"lint-staged": "^9.5.0",
"prettier": "1.14.0",
"testcafe": "^1.8.8"
},
after running test it gives me loading state but not the given mock data. is there anything that i am doing wrong here. any help is appreciated. sad that i couldnt find any documentation for testing graphql and compose hoc components.