Поэтому у меня возникают проблемы, когда я использую фермент для тестирования компонента, использующего модули css. Или я должен сказать filename.module.scss
Что происходит, когда я делаю что-то вроде:
const wrapper = shallow(<MyComponent {...data}/>);
console.info('wrapper = ', wrapper.debug());
Моя отладка работает и показывает структуру моих компонентов со всеми моими div. Проблема в том, что ни один из моих стилей не добавляется во время выполнения тестов. Но когда я запускаю Gatsby Develop, стили добавляются. Так что для ясности только в тестовом режиме я не вижу стили, добавленные к моему компоненту !!!
MyComponent.js
import React, { Component } from 'react';
import styles from ‘./MyComponent.module.scss';
class MyComponent extends Component {
render() {
const {
name,
} = this.props;
return (
<React.Fragment>
<div className = {styles.header}>
<div className = {styles.name}>{name}</div>
</div>
</React.Fragment>
);
}
}
Моя отладка показывает все стили как неопределенный, что сводит меня с ума, поскольку я не могу тестировать на основе имени стиля, существует ли div.
Вот мой пакет для шуток.
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
Для всех, кто сталкивается с этой проблемой.
npm install identity-obj-proxy
затем добавьте это в свой package.json
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|sass|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
Надеюсь, это кому-то поможет.
Это сработало! Спасибо!