Я пытаюсь проверить мой React компонент с Jest + Enzyme, но когда у моего компонента есть файл SASS (scss), происходит {{X5} } .

Это мой файл SASS:

.user-box {
  width: 50px;
  height: 50px;
}

И я просто импортирую это в мой компонент:

import React from 'react';

import './userBox.scss';

class MyComponent extends React.Component {
    render() {
        const style = {
            borderRadius: '99px'
        };
        return (
            <div>Hello World</div>
        );
    }
}

export default MyComponent;

Следующее сообщение об ошибке моего теста:

Jest test error message

Если я прокомментирую import './userBox.scss';, тест будет в порядке.

Как я могу протестировать React компонент с Jest + ‵ Enzyme`, когда стиль импортирован

12
Lai32290 8 Дек 2016 в 16:06

4 ответа

Лучший ответ

Вы должны определить макет для этого типа файла, определив moduleNameMapper в настройках шутки.

Мы используем identity-obj-proxy. Так что установите его с

npm install identity-obj-proxy --save-dev 

И добавьте его в вашу шутку:

"moduleNameMapper": {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy"
  }
19
Andreas Köberle 8 Дек 2016 в 15:28

Некоторое время я искал решение для аналогичной проблемы, и я продолжал сталкиваться с решением выше.

Сначала я не работал, но понял, что Jest просто игнорирует все, что я добавил в "jest" в package.json. Моя установка включает в себя файл jest.config.js. Я обнаружил, что если я добавлю туда «moduleNameMapper», это сработает. Так что теперь мой jest.test.config.js выглядит примерно так:

module.exports = {
  setupFiles: ["<rootDir>/testSetup.js"],
  moduleNameMapper: {
    "^.+\\.(css|scss)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/fileMocks.js"
  }
};
4
Carlene 25 Фев 2019 в 15:51

Следующая информация ранее была недоступна, поэтому я сделал запрос на получение facebook / jest и он был объединен.


Я хотел заглушить стиль, импортированный в модулях, что-то вроде:

// module.js
import Style from '@/path/to/style.scss';
import App from './App';

Итак, я создал заглушку стиля:

// test/unit/stubs/style.js
module.exports = '.style-stub{color:red;}';

После возни со следующим jest.conf.js:

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // '@' alias
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
}

Я обнаружил, что порядок moduleNameMapper важен. Правило псевдонима @ разрешалось до моего правила .scss, поэтому файл стиля был загружен как обычный модуль и провалит испытание.

Решение состоит в том, чтобы поставить определенные правила на первое место.

moduleNameMapper: {
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
    '^@/(.*)$': '<rootDir>/src/$1',
}
2
Emile Bergeron 10 Янв 2018 в 17:36

Если у вас в стеке есть Babel, это можно исправить, используя babel-jest

Просто сделайте npm i --save-dev babel-jest и в вашем файле настроек Jest добавьте:

"moduleNameMapper": {
  "^.+\\.(css|less|scss)$": "babel-jest"
}
26
Abhijith Sasikumar 26 Ноя 2019 в 04:32