Получение модулей sass css для отображения при использовании фермента с Гэтсби - PullRequest
Новая
       38

Получение модулей sass css для отображения при использовании фермента с Гэтсби

0 голосов
/ 02 сентября 2018

Так что у меня возникают проблемы, когда я использую энзим для тестирования компонента, который использует модули CSS. Или я должен сказать filename.module.scss

Что происходит, когда я делаю что-то вроде: 

const wrapper = shallow(<MyComponent {...data}/>);
console.log('wrapper = ', wrapper.debug());

Моя отладка работает и показывает мою структуру компонентов со всеми моими div'ами там. Проблема в том, что ни один из моих стилей не добавляется во время текущих тестов. Но когда я запускаю Gatsby, меняются стили. Так что для ясности только в тестовом режиме я не вижу стили, добавленные в мой компонент !!!

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>
    );
  }
}

Моя отладка показывает все стили как undefined , что сводит меня с ума, так как я не могу проверить, основываясь на имени стиля, если div существует.

Вот мои настройки пакета для шуток. 

  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
    },
    "setupFiles": [
      "<rootDir>/.jest/setupFiles.js"
    ]
  }

1 Ответ

0 голосов
/ 03 сентября 2018

Для всех, кто столкнулся с этой проблемой. 

npm install identity-obj-proxy

затем добавьте это в свой package.json 

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|sass|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "<rootDir>/.jest/setupFiles.js"
    ]
  }

Надеюсь, это кому-нибудь поможет.

...