У меня проблема с созданием снимка теста для моего компонента. Я следил за многими ответчиками, такими как:
- Насмешка над модулями css в шутке
- 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: Не удается прочитать свойство «uploadButton» неопределенного
Я пытался использовать библиотеку jest-css-modules
, а затем в package.json: "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
Я пытался использовать identity-obj-proxy
, а также множество комбинаций в moduleNameMapper
. Ни одно из решений из приведенных выше ссылок не работает для меня...