Реагируйте, Jest tdd с машинописью - PullRequest
Новая
       17

Реагируйте, Jest tdd с машинописью

0 голосов
/ 26 апреля 2020

React, Jest tdd с машинописью

Привет

Я смотрю на простое учебное пособие TDD, но я пытаюсь использовать машинопись, но учебники не в машинописи .

Простым примером является компонент Class с заголовком и счетчиком.

Этот тест просто проверяет, что компоненты загружаются без сбоев, и щелчок счетчика увеличивает состояние счетчика.

У меня есть функция установки, которая создает мелкий рендеринг компонента приложения

Когда я вызываю функцию настройки в операторе it, я получаю следующую ошибку. 

const setup: (state: IState, props?: {}) => ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>
Expected 1-2 arguments, but got 0.ts(2554)
App.test.tsx(15, 16): An argument for 'state' was not provided.
Peek Problem
No quick fixes available

Как я могу исправить эта машинописная ошибка

App.tsx 

import React, {Component} from 'react';
import './App.css';

interface IState{
  counter: number
}

interface IProps{

}

class App extends Component<IState, {}> {

  state = {
    counter: 0
  }

  render(){
    return (
      <div data-test='componentApp'>
        <h1 data-test='counter'>The counter is {this.state.counter}</h1>
        <button 
          data-test='button' 
          onClick={() => this.setState({counter: this.state.counter + 1})
          }>Increment Counter</button>
      </div>
    )
  }
}

export default App;

App.text.tsx 

import React from 'react';
import App from './App';
import "./setupTests"
import { shallow } from "enzyme";

interface ITest{
  warpper: String,
  val: String
}

interface IState{
  counter: number
}

const setup = (state:IState, props={}) => {
  const wrapper =  shallow(<App {...state} {...props}/>)
  if(state) wrapper.setState(state)
  return wrapper
}

const findByTestAttr = (wrapper:any, val:string) => {
  return wrapper.find(`[data-test="${val}"]`);
}

describe('App Component', () => {

  it('renders without crashing', () => {
    const wrapper = setup() //Error here
    const componentApp = findByTestAttr(wrapper, 'componentApp')
    expect(componentApp.length).toBe(1)
  });

  it('renders incerment button', () => {
    const wrapper = setup() //Error here
    const button = findByTestAttr(wrapper, 'button')
    expect(button.length).toBe(1)
  })

  it('renders counter display', () => {
    const wrapper = setup() //Error here
    const counter = findByTestAttr(wrapper, 'counter') 
    expect(counter.length).toBe(1)
  })

  it('counter starts at 0', () => {
    const wrapper = setup(); //Error here
    const initialCounterState = wrapper.state('counter');
    expect(initialCounterState).toBe(0)
  })

  it('clicking button increments counter display', () => {
    const counterHere = 7
    const wrapper = setup(null, {counterHere})
    const button = findByTestAttr(wrapper, 'button');
    button.simulate('click')
    const counter = findByTestAttr(wrapper, 'counter') 
    expect(counter.text()).toContain(counter+1)
  })

})

1 Ответ

1 голос
/ 26 апреля 2020

Ну, эта ошибка не проистекает из TypeScript, вы просто не передаете state в setup. Попробуйте создать экземпляр wrapper как const wrapper = setup({counter: 0}). В качестве примечания, я не рекомендую использовать shallow, так как он раскрывает внутренние компоненты компонента (которые вы используете, вызывая setState), это неприятно использовать это для рендеринга. Вместо этого попробуйте использовать mount.

...