cube-js / cube-js/cube

How to configure jest environement to run cubejs queries from integration tests (JavaScript SDK) ?

Open
#7,442 1 comment 0 reactions 0 assignees View on GitHub
client:core question
Dominant language
Rust
Stars
20.8k
Forks
2.1k
Avg merge
1d 2h
Merged PRs (30d)
181

Description

Hello cube community 👋

we are trying to implement intregration testing on a react component that uses the QueryBuilder to perform request to our cubejs backend.

This is the first part of our application in which we will implement testing and we dont want to trigger real api call to our cubejs backend so we implemented a MSW solution to mock api calls to /meta.

For the testing environement part, we use jsdom in our jest config (which i think, might be the cause of the error below)

```shell
metaError: Error: Error
at _callee$ (/Users/matthieu/dev/stash-app/node_modules/@cubejs-client/react/src/QueryBuilder.jsx:184:32)
at tryCatch (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
at Generator. (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
at Generator.throw (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
at asyncGeneratorStep (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _throw (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at processTicksAndRejections (node:internal/process/task_queues:95:5),
richMetaError: RequestError:
at _callee5$ (/Users/matthieu/dev/stash-app/node_modules/@cubejs-client/core/src/index.js:165:23)
at tryCatch (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
at Generator. (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
at Generator.next (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
at asyncGeneratorStep (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/Users/matthieu/dev/stash-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
at processTicksAndRejections (node:internal/process/task_queues:95:5) {
response: { error: '' },
status: undefined
},
```

Apparently there is some issue in the CubeJsApi instance when it tries to reach the meta object and i think it might come from the testing environnement. We run the test in a jest environement wich is nodejs, simulate the dom with jsdom and use the undici package as polyfill for fetch, Headers, FormData, Request, Response objects

Is there some correct way to setup jest environement for integration testing components with QueryBuilder ?

Thanks for you help

```
//jest.polyfills.js
const { TextDecoder, TextEncoder } = require('node:util')

Object.defineProperties(globalThis, {
TextDecoder: { value: TextDecoder },
TextEncoder: { value: TextEncoder },
})

const { Blob, File } = require('node:buffer')
const { fetch, Headers, FormData, Request, Response } = require('undici')

Object.defineProperties(globalThis, {
fetch: { value: fetch, writable: true },
Blob: { value: Blob },
File: { value: File },
Headers: { value: Headers },
FormData: { value: FormData },
Request: { value: Request },
Response: { value: Response },
});

```

```
// jest.config.js
const nextJest = require("next/jest");

const createJestConfig = nextJest({
dir: "./",
});

const customJestConfig = {
setupFiles: [
"/jest.polyfills.js",
],
setupFilesAfterEnv: [
"/jest.setup.js",
"/test-utils/mocks/index.ts"
],
moduleNameMapper: {
"^@/components/(.*)$": "/components/$1",
"^domains/(.*)$": "/domains/$1",
"^store/(.*)$": "/store/$1",
"^test-utils/(.*)$": "/test-utils/$1",
"uuid": require.resolve('uuid'),
},
modulePathIgnorePatterns: [
"/e2e-test-utils/",
"/__tests__/",
],
testPathIgnorePatterns: [
"[/\\\\\\\\](node_modules|.next)[/\\\\\\\\]"
],
transformIgnorePatterns: [
"[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$",
],
transform: {
'^.+\\.(ts|tsx)$': 'babel-jest',
},
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
testEnvironment: "jsdom",
testEnvironmentOptions: {
customExportConditions: ['']
},
type: "module",
preset: "ts-jest"
};

module.exports = createJestConfig(customJestConfig);
```

```
// jest.setup.js
import "@testing-library/jest-dom/extend-expect";
import next from "next";
import { worker } from "./test-utils/httpServer";

beforeAll(() => worker.listen({ onUnhandledRequest: 'warn' }));

afterEach(() => worker.resetHandlers());

afterAll(() => worker.close());

next({});
```

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.