Question

我在为组件创建快照测试时遇到问题。我关注了许多类似的问题：

但是没有一种解决方案对我有用（也许是因为我的文件不是在JS中，而是在TypeScript中，但是我不知道）。我的组件是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中的许多组合。上面链接中的解决方案都不适合我...

Answer 1

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

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

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

Answer 2

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

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

在Jest快照中模拟css-modules

2 个答案: