Макет css-модулей в Jest снимке - PullRequest
Новая
       23

Макет css-модулей в Jest снимке

1 голос
/ 29 мая 2019

У меня проблема с созданием теста снимка для моего компонента. Я следовал за многими anwsers как:

Но ни одно из решений не работает для меня (возможно, это потому, что мои файлы в TypeScript не JS, но я понятия не имею). Мой компонент UploadFile.tsx: 

import * as React from 'react';
import css from './UploadFile.scss';

interface Props {
  uploadFile(data: FormData): void;
  resetUploadedCsv(): void;
}

export class UploadFile extends React.Component<Props> {
  public handleUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.props.resetUploadedCsv();
    const data = new FormData();
    const file = event.target.files[0];
    data.append('file', file);
    this.props.uploadFile(data);
  }

  public render() {
    return (
      <div>
        <label className={css.uploadButton}>
          Upload
          <input
            id='Upload'
            type='file'
            accept='.csv'
            onChange={this.handleUploadFile}
          />
        </label>
      </div>
    );
  }
}

И мой тест: 

import * as React from 'react';
import * as renderer from 'react-test-renderer';
import { UploadFile} from '../UploadFile';

it('renders correctly', () => {
  const fakeProps = {
    uploadFile: (data: FormData) => console.log(data),
    resetUploadedCsv: () => console.log('reset'),
  };
  const tree = renderer.create(<UploadFile{...fakeProps} />).toJSON();
  expect(tree).toMatchSnapshot();
});

Я получаю ошибку:

TypeError: Невозможно прочитать свойство uploadButton с неопределенным значением

Я пытался использовать библиотеку jest-css-modules, а затем в package.json: "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"

Я пытался использовать identity-obj-proxy, а также много комбинаций в moduleNameMapper. Ни одно из решений по ссылкам выше не работает для меня ...

Ответы [ 2 ]

1 голос
/ 19 июля 2019

Или вы можете установить --esModuleInterop на true в вашем tsconfig.json или tsconfig.test.json

"compilerOptions": {
  ...
  "esModuleInterop": true,
  ...

https://www.typescriptlang.org/docs/handbook/compiler-options.html

0 голосов
/ 29 мая 2019

Поскольку вы используете TypeScript, ваш импорт неправильный, должно быть: 

import * as css from './UploadFile.scss';
...