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

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

Но ни одно из решений не работает для меня (может быть, это потому, что мои файлы в 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. Ни одно из решений из приведенных выше ссылок не работает для меня...


person heisenberg7584    schedule 29.05.2019    source источник


Ответы (2)


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

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

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

person gare4ka    schedule 19.07.2019

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

import * as css from './UploadFile.scss';
person jake-ferguson    schedule 29.05.2019