How to configure jest environement to run cubejs queries from integration tests (JavaScript SDK) ?
- 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
Assessment
This issue has not been assessed yet.