在 Jest 快照中模拟 css 模块答案

【问题标题】：Mock css-modules in Jest snapshot在 Jest 快照中模拟 css 模块
【发布时间】：2019-05-29 07:00:45
【问题描述】：

我在为我的组件创建快照测试时遇到问题。我关注了许多回答者，例如：

但是没有一个解决方案对我有用（可能是因为我的文件是 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 中的许多组合。上面链接中的解决方案都不适合我...

【问题讨论】：

标签： javascript reactjs jestjs css-modules

【解决方案1】：

或者您可以在tsconfig.json 或tsconfig.test.json 中将--esModuleInterop 设置为true

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

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

【讨论】：

【解决方案2】：

当您使用 TypeScript 时，您的导入错误，应该是：

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

【讨论】：