I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "@kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/@kubevious/entity-meta/public,./node_modules/@kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian@gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"@kubevious/entity-meta": "^1.0.69",
"@kubevious/state-registry": "^1.0.13",
"@kubevious/ui-alerts": "^1.0.49",
"@kubevious/ui-components": "^1.0.242",
"@kubevious/ui-framework": "^1.0.59",
"@types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"@storybook/addon-actions": "6.5.7",
"@storybook/addon-essentials": "6.5.7",
"@storybook/addon-links": "6.5.7",
"@storybook/react": "6.5.7",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "12.1.5",
"@types/jest": "26.0.24",
"@types/js-yaml": "^4.0.0",
"@types/node": "^14.6.0",
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "5.27.1",
"@typescript-eslint/parser": "5.27.1",
"@babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"@rollup/plugin-babel": "5.3.1",
"@rollup/plugin-commonjs": "22.0.0",
"@rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"@storybook/preset-scss": "1.0.3",
"@types/react-router-dom": "5.3.3",
"@testing-library/dom": "8.13.0",
"@testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"@kubevious/ui-framework": "^1.0.59",
"@kubevious/ui-components": "^1.0.242",
"@kubevious/ui-alerts": "^1.0.49",
"@kubevious/entity-meta": "^1.0.69",
"@kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2",
"@types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '@rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}