'Cannot unit test proyect with my custom react library

I have created this NPM package https://www.npmjs.com/package/@applaudo/react-clapp-ui

I can install it and use it correctly in other project using create react app and it works fine, but when I try to run my unit test in the destination project I get this error from jest

 FAIL  src/components/test.test.tsx
  ● Test suite failed to run

    Cannot find module '@applaudo/react-clapp-ui' from 'src/components/test1.tsx'

    Require stack:
      src/components/test1.tsx
      src/components/test.test.tsx

      1 | import Mx from 'rc-picker/lib/locale/es_MX';
    > 2 | import { Button, Content, DatePicker, Heading, Label, useClapp } from "@applaudo/react-clapp-ui";
        | ^
      3 |
      4 |
      5 | export const Test1 = () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (src/components/test1.tsx:2:1)

This is my rollup.config

import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss';
import { RollupOptions } from 'rollup';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

const dependencies = Object.keys(pkg.dependencies);
const external = [...dependencies, 'lodash', /\.css$/, /rc-util*/];

const options: RollupOptions[] = [
  {
    input: 'index.tsx',
    output: {
      name: pkg.name,
      dir: 'dist',
      format: 'es',
      sourcemap: false,
      preserveModules: true,
      exports: 'named',
      assetFileNames: '[name][extname]',
    },
    plugins: [
      // @ts-ignore
      peerDepsExternal(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      postcss({
        minimize: true,
        extract: true,
        exec: true,
        sourceMap: true,
        use: ['sass'],
      }),
      terser(),
    ],
    external,
  },
  {
    input: 'dist/dts/index.d.ts',
    output: {
      file: 'dist/index.d.ts',
      format: 'commonjs',
    },
    external: [/\.scss$/, /\.css$/],
    plugins: [
      dts({
        compilerOptions: {
          baseUrl: 'dist/dts',
        },
      }),
    ],
  },
];

export default options;

and this is a fragment of the package.json

{
  "license": "Apache-2.0",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": [
    "*.scss"
  ]
}

I try using formar commonjs for packagin the lib instead of es and still din't work in any of the 3 projects I have tested jest and TS using react testing library or enzyme, same error.

So I'm not sure how to pack the lib so it work with jest and also webpack (currently work with webpack)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source