javascript - 在 Jest 快照中模拟 css 模块

Question

我在为我的组件创建快照测试时遇到问题。我关注了很多答案，例如:

• > Mocking css modules in jest
• > https://github.com/facebook/jest/issues/1347
• > https://jestjs.io/docs/en/webpack

但是没有一个解决方案适合我(可能是因为我的文件是 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: Cannot read property 'uploadButton' of undefined

我尝试使用 jest-css-modules库，然后在 package.json 中: "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"

我尝试使用 identity-obj-proxy以及 moduleNameMapper 中的许多组合.上面链接中的解决方案都不适合我...

Answer 1

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

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

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