ошибка storyshots - не удалось найти модуль ./src/common, отображаемый как

Я только что установил @storybook/addon-storyshots и, следуя их инструкциям, поместил его в корень.

src / Storyshots.test.ts

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

Когда я запускаю тесты, все мои существующие тесты проходят, но он не работает в этом файле - StoryShots.test.ts с ошибкой:

Ошибка:

FAIL  src/Storyshots.test.ts 
Test suite failed to run

Configuration error:

Could not locate module ./src/common mapped as:
C:\apps\vanilla\storybook-examples\src\$1.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/src\/(.*)/": "C:\apps\vanilla\storybook-examples\src\$1"
  },
  "resolver": undefined
}

  at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:552:17)
  at Object.<anonymous> (node_modules/shelljs/shell.js:9:14)

В моем проекте есть разрешение модуля, и там все работает. См. Пример разрешения модуля для моего проекта:

tsconfig.json

{
...
  "compilerOptions": {
    "baseUrl": "./",
  },
  "include": [
    "src/**/*", "@types", "stories"
  ]
}

.babelrc

{
  "plugins": [
...
    ["module-resolver", {
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "root": ["./"],
      "alias": {
        "src": "./src"
      }
    }]
  ]
}

webpack.config.dev.js

const src = path.join(__dirname, '/src');

module.exports = {
...
  resolve: {
    modules: [src, 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],

    // fix module resolver for typescript !!!
    alias: {
      src
    }
  },

Я просто не установил ничего из этого в папке.storybook - .storybook/. Я не уверен, как работает разрешение сборника рассказов или почему он ищет папку common/. У меня нет общей папки.

Это пример одной из моих историй:

Basic.stories.tsx

import React from 'react';
import Basic from 'src/Components/Basic/Basic';

export const BasicHelloWorld = () => <Basic {...{ title: 'hello world' }} />;
export default { title: 'Basic' };

Это мой сборник рассказов main.js

main.js

module.exports = {
  stories: ['../**/*.stories.tsx', '../**/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ]
};

Оцените любые предложения. Благодарность

Источник

1 ответ

Решение

Оказывается, единственное, что я не включил в приведенные выше конфигурации, - это файл jest.config.js.

Оказывается, причиной этой проблемы было следующее:

jest.config.js! сломанный

  moduleNameMapper: {
    'src/(.*)': '<rootDir>/src/$1',
...
  },

Сегодня я решил избавиться от всего, и в процессе наткнулся на примеры конфигурации ts-jest, где регулярное выражение имело точный путь, то есть начиналось с ^ и заканчивалось на $, то есть не совпадение.

Не то чтобы я особо об этом думал или почему он сломает только storyshots и ничего больше, кроме всего, что касается сопоставления файлов и разрешений, я думал, что стоит обеспечить точность. Я обновил свое регулярное выражение в соответствии с указанными выше путями и BINGO - БОЛЬШЕ НЕТ ОШИБКИ!!! ХАХАХ. Хорошая удача.

jest.config.js £ исправлен

  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1'
    ...

  },
Источник
Другие вопросы по тегам