запуск тестов Jest с настройкой веб-пакета - PullRequest
Новая
       12

запуск тестов Jest с настройкой веб-пакета

0 голосов
/ 22 февраля 2019

Я использую пакет next-optimized-images для оптимизации моих изображений в моем проекте next.js.

Это конфигурация, которая должна позволять мне загружать изображения и изменять их размер автоматически, используя параметры URL, такие как ?sizes[]=300

Что работает

next.config.js 

const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages({
  optimizeImagesInDev: true,
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: "responsive-loader",
        options: {
          adapter: require("responsive-loader/sharp"),
        },
      },
    ],
  },
});

Я также использую png и jpg оптимизирующие библиотеки:

"imagemin-mozjpeg": "^8.0.0", "imagemin-optipng": "^6.0.0"

Изображения в моих файлах JSON / JS структурированы следующим образом: 

{
  ...,
  imgs: [
    require("../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300"),
    ...,
  ]
}

, поэтому при использовании его с responsive-loader все загружается так, как должнот. е. пути к изображениям заменяются объектом в приложении, который содержит два пути с разными размерами.

Что не работает

Что не работает, тем не менее, это тесты (Jest тесты), который работал до того, как я ввел объявление require в каждом элементе массива изображения.Все, что он говорит, это то, что он не может импортировать требуемый модуль, потому что, скорее всего, он не использует конфигурацию веб-пакета, которая разрешает эти пути с аргументами.Как мне это сделать?

Сообщение об ошибке:

Cannot find module '../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300' from 'categories.js'

Я не могу просто использовать пути к изображениям, а затем require их позже в <img src={require(path)} /> теги, потому что они должны быть относительными, чтобы эта библиотека работала, и я использую эти изображения во многих различных компонентах (некоторые вложены).С этой библиотекой конфигурация веб-пакета становится очень трудной, когда дело доходит до абсолютных путей, а также пути с аргументами вроде size не разрешаются.

1 Ответ

0 голосов
/ 23 февраля 2019

Разобрался.Все, что вам нужно сделать, это создать файл конфигурации для jest.

В вашем package.json изменить "test" с react-scripts test на jest -c jest.config.js

jest.config.js 

{
  "bail": true,
  "verbose": true,

  "moduleNameMapper": {
    "^.*(jpe?g|png).*$": "<rootDir>/assetsTransformer.js"
  }
}

Важно использовать moduleNameMapper для сопоставления с любым расширением изображения, которое вам нужно.Создайте другой файл с именем assetsTransformer.js, который будет обрабатывать ваши необходимые изображения.На самом деле вам не нужно ничего делать с импортированными изображениями, если вам это не нужно.В моем случае я этого не сделал, поэтому я просто создал файл со следующим содержимым:

assetsTransformer.js 

module.exports = {
  process(src, filename, config, options) {
    return;
  },
};
...