Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🔧 Use jest directly as test runner #21174

Merged
merged 1 commit into from
Jan 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions airbyte-webapp/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
module.exports = {
env: {
test: {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Add the require babel configuration (that babel-jest will read) that is required to transform our code. We only add this when running in the test environment, to not potentially collide with any configuration of Create React App, while we're still using it to build the rest of the app.

// Define presets used to compile code when running jest tests
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
["@babel/preset-react", { runtime: "automatic" }],
"@babel/preset-typescript",
],
},
},
};
21 changes: 21 additions & 0 deletions airbyte-webapp/jest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// eslint-disable-next-line jest/no-jest-import
import type { Config } from "jest";
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Actual jest config, compiled from our previous package.json plus some additional config we need now, since CRA doesn't take care of it anymore.


const jestConfig: Config = {
verbose: true,
// Required to overwrite the default which would ignore node_modules from transformation,
// but several node_modules are not transpiled so they would fail without babel transformation running
transformIgnorePatterns: [],
snapshotSerializers: ["./src/test-utils/classname-serializer.js"],
coveragePathIgnorePatterns: ["\\.stories\\.tsx$"],
modulePathIgnorePatterns: ["src/.*/__mocks__"],
testEnvironment: "jsdom",
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
"\\.module\\.scss$": "test-utils/mock-data/mockIdentity.js",
"\\.(css|png|svg|scss)$": "test-utils/mock-data/mockEmpty.js",
Comment on lines +15 to +16
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Make sure we mock asset imports in a way that jest test run properly.

},
setupFilesAfterEnv: ["./src/test-utils/setup-tests.ts"],
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Moved this file (and the classname-serializer) into src/test-utils, since we no longer require it to be at src/setupTests.ts, which CRA forced us to.

};

export default jestConfig;
13,551 changes: 9,312 additions & 4,239 deletions airbyte-webapp/package-lock.json

Large diffs are not rendered by default.

22 changes: 10 additions & 12 deletions airbyte-webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"prebuild": "npm run generate-client",
"build": "BUILD_PATH='./build/app' craco build",
"pretest": "npm run generate-client",
"test": "craco test",
"test:coverage": "npm test -- --coverage --watchAll=false",
"test": "jest --watch",
"test:coverage": "jest --coverage --watchAll=false",
"format": "prettier --write 'src/**/*.{ts,tsx}'",
"storybook": "start-storybook -p 9009 --quiet",
"build:storybook": "build-storybook -o 'build/storybook'",
Expand Down Expand Up @@ -86,6 +86,10 @@
},
"devDependencies": {
"@airbyte/eslint-plugin": "file:./packages/eslint-plugin",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@craco/craco": "^7.0.0-alpha.7",
"@storybook/addon-essentials": "^6.5.7",
"@storybook/builder-webpack5": "^6.5.7",
Expand All @@ -98,7 +102,7 @@
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/flat": "^5.0.2",
"@types/jest": "^27.4.1",
"@types/jest": "^27.5.2",
"@types/js-yaml": "^4.0.5",
"@types/json-schema": "^7.0.11",
"@types/lodash": "^4.14.182",
Expand All @@ -118,6 +122,7 @@
"@types/unist": "^2.0.5",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"babel-jest": "^29.3.1",
"dotenv": "^16.0.3",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "^7.0.1",
Expand All @@ -128,6 +133,8 @@
"eslint-plugin-unused-imports": "^2.0.0",
"express": "^4.18.1",
"husky": "^8.0.1",
"jest": "^29.3.0",
"jest-environment-jsdom": "^29.3.1",
"license-checker": "^25.0.1",
"lint-staged": "^12.3.7",
"mini-css-extract-plugin": "^2.6.1",
Expand Down Expand Up @@ -173,14 +180,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"transformIgnorePatterns": [],
"snapshotSerializers": [
"./scripts/classname-serializer.js"
],
"coveragePathIgnorePatterns": [
".stories.tsx"
]
}
}
20 changes: 0 additions & 20 deletions airbyte-webapp/src/setupTests.ts

This file was deleted.

2 changes: 2 additions & 0 deletions airbyte-webapp/src/test-utils/mock-data/mockEmpty.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// An empty object exported that jest can use for png, css, or svg asset imports
module.exports = {};
14 changes: 14 additions & 0 deletions airbyte-webapp/src/test-utils/mock-data/mockIdentity.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// A mock that will return the name of the property called on it.
// Useful for mocking out (S)CSS modules.

module.exports = new Proxy(
{},
{
get: (target, key) => {
if (key === "__esModule") {
return false;
}
return key;
},
}
);
22 changes: 22 additions & 0 deletions airbyte-webapp/src/test-utils/setup-tests.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom/extend-expect";
import "@testing-library/jest-dom";
import "../globals";

// jsdom doesn't mock `matchMedia`, which is required by react-slick
Object.defineProperty(window, "matchMedia", {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Rewrote this mock slightly from what we had beforehand here, to align with what jest actually has in their documentation: https://jestjs.io/docs/26.x/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

writable: true,
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // deprecated
removeListener: jest.fn(), // deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
Loading