Improve documentation for Testing within React & Jest useCubeQuery
- Dominant language
- Rust
- Stars
- 20.8k
- Forks
- 2.1k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 181
Description
**Is your feature request related to a problem? Please describe.**
As with any codebase, testing is very important. By using Cube for the first time I reached the point where I had to mock the HTTP layer to be able to test my code as a whole thing (integration-test).
#### code I wanted to test
```tsx
const EmailPerformanceEngagementChart = () => {
const { filters } = useAnalyticsContext();
const context = useContext(UserContext);
const {
absoluteTimeRange: { startDate, endDate },
} = filters;
const { error, isLoading, resultSet, refetch } = useCubeQuery({
filters: getFilters({
accountId: context.accountId as string,
mailboxEmails: filters.mailboxEmails,
userEmails: filters.userEmails,
}),
measures: ['sent_emails.total_count'],
timeDimensions: [
{
dimension: 'sent_emails.date_sent',
granularity: 'day',
dateRange: [startDate.toISOString(), endDate.toISOString()],
},
],
order: {
'sent_emails.date_sent': 'asc',
},
});
if (error) {
return ;
}
if (isLoading) {
return ;
}
return (
{
return new Date(x).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}}
/>
);
};
export default EmailPerformanceEngagementChart;
```
**Describe the solution you'd like**
Then I saw that `cubejs` instance accepts an HTTP transport implementation. At first glance I thought of implementing it with `Axios`, because I already have the setup for mocking and testing it, but after careful consideration, I find out that could be a little bit risky as the Cube team could change something there and I miss something besides being using typescript.
**Describe alternatives you've considered**
Then, after reading the Cube HTTP implementation I saw they were using `cross-fetch` which is a "proxy" for multi-environment javascript execution. So the solution became simpler (although I still think this could be different, for example by using [jest-fetch-mock](https://www.npmjs.com/package/jest-fetch-mock#usage) but I wasn't able to make it work.)
#### my test file
```tsx
import crossFetch from 'cross-fetch';
jest.mock('cross-fetch', () => {
return {
__esModule: true,
default: jest.fn(),
};
});
it('renders', async () => {
crossFetch.mockResolvedValue({
status: 200,
text: () => Promise.resolve(JSON.stringify(engagementChartMockData)),
});
const { container } = render();
const horizontalAxisValues = 8;
await waitFor(() => {
const axisValues = container.querySelectorAll('.recharts-cartesian-axis-tick-value');
expect(axisValues).toHaveLength(horizontalAxisValues);
});
});
```
This isn't bullet proof because I want to be able to mock specific endpoints by defining their methods and queries, but it solves my problem for now.
When having multiple queries inside your component, you probably will need to [mockImplementation](https://jestjs.io/docs/mock-functions#mock-implementations)
### end
Hope this can help someone and maybe get some answers from the Cube team about testing practices in their documentation
Contributor guide
Assessment
This issue has not been assessed yet.