React，Jest tdd 与打字稿

Question

React，用 typescript 开玩笑 tdd

嗨

我正在看一些简单的 TDD 教程，但我正在尝试使用打字稿，但教程不是打字稿。

简单的例子是 Class 组件，带有 header 和一个计数器。

测试只是测试组件加载没有崩溃，点击计数器增加计数器状态。

我有一个设置函数可以创建一个浅层 ri 渲染 App 组件

当我在 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)
  })

})

Answer 1

好吧，这个错误不是来自 TypeScript，您只是没有在 setup 中传递任何 state。尝试像 const wrapper = setup({counter: 0}) 一样实例化 wrapper。作为旁注，我不鼓励使用 shallow，因为它会暴露组件的内部结构（您通过调用 setState 来利用它），使用它进行渲染是一个令人讨厌的骗局。相反，请尝试使用 mount。

React，Jest tdd 与打字稿

React, Jest tdd with typescript

tdd

typescript

reactjs

jestjs