Свойство 'xxx' не существует для типа 'Readonly <{}>' - PullRequest
Новая
       23

Свойство 'xxx' не существует для типа 'Readonly <{}>'

0 голосов
/ 25 июня 2018

Я пытаюсь написать тесты для компонента React Typescript. App.tsx: 

import * as React from 'react';
import { Button } from 'react-bootstrap';

interface Igift {
  id: number;
}
interface IAppState {
  gifts: Igift[];
}
class App extends React.Component<{}, IAppState> {
  public state = {
    gifts: []
  };

  public addGift = () => {
    const { gifts } = this.state;
    const ids = this.state.gifts.map(ourGift => ourGift.id);

    const maxId = ids.length > 0 ? Math.max(...ids) : 0;

    gifts.push({ id: maxId + 1 });

    this.setState({ gifts });
  };

  public render() {
    return (
      <div>
        <h2>Gift Giver</h2>
        <Button className="btn-add" onClick={this.addGift}>
          Add Gift
        </Button>
      </div>
    );
  }
}

export default App;

и тест для этого компонента. App.test.tsx: 

import { shallow } from 'enzyme';
import * as React from 'react';

import App from './App';

const app = shallow(<App />);

describe('App', () => {
  it('renders correctly', () => {
    expect(app).toMatchSnapshot();
  });

  it('initializes the `state` with an empty list of gifts', () => {
    expect(app.state().gifts).toEqual([]);
  });

  it('adds a new gift to `state` when clicking the `add gift` button', () => {
    app.find('.btn-add').simulate('click');

    expect(app.state().gifts).toEqual([{ id: 1 }]);
  });
});

Я получаю следующую ошибку: 

(14,24): Property 'gifts' does not exist on type 'Readonly<{}>'.

В App.test.tsx Я не могу найти какие-либо подробности относительно этого. Приложение загружается с помощью create-реагировать-приложение с версией сценариев. Тесты проходят, но когда я пытаюсь запустить приложение, оно выдает эту ошибку. Что нужно сделать?

1 Ответ

0 голосов
/ 25 июня 2018

Поскольку <App/> имеет универсальный тип JSX.Element, он не содержит достаточно информации для вывода типа состояния в результате shallow (то же самое относится и к типам реквизита и компонентов).Это можно исправить, экспортировав IAppState из App.tsx и параметризовав shallow с компонентами, реквизитами и типами состояний: 

import App, {IAppState} from './App';
..
const app = shallow<App, {}, IAppState>(<App />); // {} is props type
..

Это также должно правильно ввести app.instance() и app.setProps().В качестве альтернативы, вы можете просто протестировать на обычном JavaScript, поскольку я не уверен, что выполнение этого в TypeScript стоит дополнительных усилий.

...