Как вызывать пользовательские методы компонента React при выполнении юнит-тестирования. Я использую машинопись

Question

Я использую реагировать на машинопись. Может кто-нибудь сказать мне, как вызвать пользовательские методы, которые написаны в компоненте внутри модульного тестирования.

Я пытался shallow и mount, но я не могу вызывать пользовательские методы.

import React  from 'react';
import {
  Theme,
  withStyles,
  createStyles,
} from '@material-ui/core';

export interface IFileUploadProps{}
export interface IFileUploadState {}

const styles = (theme: Theme) => {
  return createStyles({
    root: {
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
      width: '100%',
      backgroundColor: 'inherit',
    },
    input: {
      display: 'none',
    },
    padding24: {
      paddingLeft: theme.spacing(3),
      paddingRight: theme.spacing(3),
    },
  });
};

class FileUpload extends React.Component<IFileUploadProps, IFileUploadState> {

    validateImage = () => {
      console.log('validate image');
    }

    render() {
      return <div>file upload</div>;
    }
  }

export default withStyles(styles)(FileUpload);

Мне нужно сделать что-то вроде этого.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
import FileUpload from './FileUpload';

configure({ adapter: new Adapter() });   
describe('FileUpload', () => {
  test('should call validateImage method correctly', () => {
    const wrapper = shallow(<FileUpload ></FileUpload>);
    wrapper.instance()['validateImage']();
  });
});

Здесь я получаю ошибку.

TypeError: Невозможно прочитать свойство 'validateImage' со значением NULL

Эта ошибка возникает, когда я экспортирую файл с использованием "export default withStyles (styles) (FileUpload);"Когда я использую экспорт по умолчанию FileUpload, он работает нормально.

Answer 1

должно работать. Например:

FileUpload.tsx:

import React from 'react';

interface IFileUploadProps {}
interface IFileUploadState {}

export class FileUpload extends React.Component<IFileUploadProps, IFileUploadState> {
  validateImage() {
    console.log('validate image');
  }

  render() {
    return <div>file upload</div>;
  }
}

FileUpload.spec.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import { FileUpload } from './FileUpload';

describe('FileUpload', () => {
  test('should call validateImage method correctly', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = shallow(<FileUpload></FileUpload>);
    expect(wrapper.text()).toBe('file upload');
    // @ts-ignore
    // tslint:disable-next-line: no-string-literal
    wrapper.instance()['validateImage']();
    expect(logSpy).toBeCalledWith('validate image');
  });
});

Результат модульного теста с охватом 100%

 PASS  src/stackoverflow/58642342/FileUpload.spec.tsx
  FileUpload
    ✓ should call validateImage method correctly (14ms)

  console.log node_modules/jest-mock/build/index.js:860
    validate image

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 FileUpload.tsx |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.487s, estimated 9s

Обновление 1

Вы должны отключить strict: true в своем файле tsconfig.json. Или используйте // @ts-ignore, чтобы пропустить статическую проверку типа tsc.

Обновление 2

Поскольку вы используете HOC - функцию высокого порядка withStyles, так что вынужно использовать .dive ([параметры]) => ShallowWrapper метод enzyme, чтобы получить мелкую оболочку FileUpload компонента.

FileUpload.tsx:

import React from 'react';
import { Theme, withStyles, createStyles } from '@material-ui/core';

interface IFileUploadProps {}
interface IFileUploadState {}

const styles = (theme: Theme) => {
  return createStyles({
    root: {
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
      width: '100%',
      backgroundColor: 'inherit'
    },
    input: {
      display: 'none'
    },
    padding24: {
      paddingLeft: theme.spacing(3),
      paddingRight: theme.spacing(3)
    }
  });
};

class FileUpload extends React.Component<IFileUploadProps, IFileUploadState> {
  validateImage() {
    console.log('validate image');
  }

  render() {
    return <div>file upload</div>;
  }
}

export default withStyles(styles)(FileUpload);

FileUpload.spec.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import FileUpload from './FileUpload';

describe('FileUpload', () => {
  test('should call validateImage method correctly', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = shallow(<FileUpload></FileUpload>);
    expect(wrapper.dive().text()).toBe('file upload');
    // @ts-ignore
    // tslint:disable-next-line: no-string-literal
    wrapper
      .dive()
      .instance()
      ['validateImage']();
    expect(logSpy).toBeCalledWith('validate image');
  });
});

Результат модульного теста со 100% покрытием:

 PASS  src/stackoverflow/58642342/FileUpload.spec.tsx
  FileUpload
    ✓ should call validateImage method correctly (31ms)

  console.log node_modules/jest-mock/build/index.js:860
    validate image

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 FileUpload.tsx |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.517s, estimated 12s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58642342