cube-js / cube-js/cube

Improve documentation for Testing within React & Jest useCubeQuery

Open
#7,507 1 comment 2 reactions 0 assignees View on GitHub
client:react help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.