react-app 编写测试

单元测试（unit testing）指的是以软件的单元（unit）为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或组件。它的基本特征就是，只要输入不变，必定返回同样的输出。

单元测试的步骤如下

准备所有的测试条件

    it('test a')

    it('test b')

调用（触发）所要测试的函数

    it('test a', ()=>{/*expect*/})

    it('test b', ()=>{/*expect*/})

验证运行结果是否正确

    npm t

还原被修改的记录

开发模式

TDD

先写好测试，然后再根据测试完成开发

BDD

针对行为写测试,软件应该怎样运行。

安装环境

yarn create react-app my-app

yarn run eject

yarn

yarn add enzyme enzyme-adapter-react-16 --dev

npm t 启动测试

浅层渲染 api

import React, { Component, Fragment } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

  state = {

    v: 'welcome to react test.'

  }

  render() {

    const { v } = this.state;

    return <Fragment>

      <h1>{v}</h1>

      <button onClick={this.handleChangeV}>add</button>

    </Fragment>

  }

  handleChangeV = e => {

    this.setState({

      v: 'ok'

    })

  }

}

export default App;

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import Enzyme, {shallow} from 'enzyme';

import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter: new Adapter()})

const l = console.log

describe('<App /> 组件测试', () => { // 测试套件

  let app;

  beforeAll(() => {

    app = shallow(< App />)

  })

  it('exists h1', () => { // 测试用例

    // 断言组件中存在 h1元素

    expect(app.exists('h1')).toBe(true) // 断言

  });

  it('only one h1', () => {

    // 断言只存在一个 h1袁元素

    expect(app.find('h1').length).toBe(1)

  })

  it('check h1 content', () => {

    expect(app.find('h1').html()).toContain('welcome to react test.')

  })

  it('click change', () => {

     app.find('button').simulate('click') // 模拟点击事件

    expect(app.find('h1').html()).toContain('ok')

    // expect(app.find('h1').html()).toContain('hello') Error

  })

})

巴特西

react-app 编写测试

单元测试的步骤如下

开发模式

TDD

BDD

安装环境

浅层渲染 api

最新文章

热门文章