Page MenuHomePhabricator

[cashtab-components] Upgrade to storybook 7 to fix dependency tree
ClosedPublic

Authored by bytesofman on Mar 24 2023, 22:20.

Details

Summary

T2541

Had to follow guide of other disgruntled storybook users. Some refactors required. But, works.

Ref for fixing the dependency tree issue: https://github.com/facebook/create-react-app/issues/12132

Test Plan

npm run storybook, test the GetAddress component and cashtab badge (click, opens extension with tx, or shares address)

Diff Detail

Repository
rABC Bitcoin ABC
Branch
march-components-refresh
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 22678
Build 44976: Build Diffcashtab-components-tests
Build 44975: arc lint + arc unit

Event Timeline

web/cashtab-components/src/utils/cashtab-helpers.ts
21

longstanding bug with task open to patch by implementing chronik. was breaking storybook in v7

Tail of the build log:

  cacheable modules 63.9 KiB
    modules by path ./node_modules/lodash/*.js 13.9 KiB 14 modules
    modules by path ./node_modules/qr.js/lib/*.js 24.8 KiB 9 modules
    modules by path ./node_modules/prop-types/ 2.6 KiB 3 modules
    modules by path ./node_modules/react/ 1.15 KiB
      ./node_modules/react/jsx-runtime.js 214 bytes [built] [code generated]
      ./node_modules/react/cjs/react-jsx-runtime.production.min.js 962 bytes [built] [code generated]
    ./node_modules/qrcode.react/lib/index.js 19.4 KiB [built] [code generated]
    ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
  ./src/index.ts + 30 modules 211 KiB [not cacheable] [built] [code generated]
  external {"commonjs2":"react","commonjs":"react","amd":"react"} 42 bytes [built] [code generated]
webpack 5.76.3 compiled successfully in 6465 ms
npm notice 
npm notice New major version of npm available! 7.7.6 -> 9.6.2
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.2>
npm notice Run `npm install -g npm@9.6.2` to update!
npm notice 

> cashtab-components@1.0.4 test
> jest "--reporters=default" "--reporters=jest-junit"

FAIL src/utils/__tests__/cashtab-helpers.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /work/web/cashtab-components/src/utils/__tests__/cashtab-helpers.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { buildPriceEndpoint, priceToSatoshis, adjustAmount } from '../cashtab-helpers';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.763 s
Ran all test suites.
Build cashtab-components-tests failed with exit code 1

implementing ts-jest to fix unit tests, deleting storybook template comments

emack requested changes to this revision.Mar 25 2023, 04:14
emack added a subscriber: emack.

See patching issues below, give it a rebase and I'll try again

image.png (284×929 px, 72 KB)

This revision now requires changes to proceed.Mar 25 2023, 04:14

Tail of the build log:

/work/web/cashtab-components /work/abc-ci-builds/cashtab-components-tests
npm notice 
npm notice New major version of npm available! 7.7.6 -> 9.6.2
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.2>
npm notice Run `npm install -g npm@9.6.2` to update!
npm notice 
npm ERR! The `npm ci` command can only install with an existing package-lock.json or
npm ERR! npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or
npm ERR! later to generate a package-lock.json file, then try again.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-03-25T04_43_59_679Z-debug.log
Build cashtab-components-tests failed with exit code 1

removing node_modules and rebuilding package-lock.json

Tested all ok, subject to resolving build errors

This revision is now accepted and ready to land.Mar 25 2023, 05:02