Hướng dẫn viết unit test trong React

import React from 'react'

const App = () => {
    return (
        <div>
            <ChildComponent />
        </div>
    )
}

const ChildComponent = () => {
    return (
        <div>
            <p>Child component</p>
        </div>
    )
}

<App>
  <div> 
    <ChildComponent /> 
  </div>
</App>

<App>
  <div> 
    <ChildComponent> 
      <div>
       <p> Child components</p>
      </div>
    </ChildComponent>
   </div>
</App>

npm install enzyme enzyme-to-json enzyme-adapter-react-16

import React from 'react'
import ReactDOM from 'react-dom'
import Basic from '../basic_test'

import Enzyme, { shallow, render, mount } from 'enzyme';
import toJson from 'enzyme-to-json'
import Adapter from 'enzyme-adapter-react-16'

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

import React, { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  increment = () => {
    this.setState({count: this.state.count + 1})
  }

  // đoạn code này mặc dù ko đúng, nhưng khi test vẫn cho kết quả pass
  // <button onClick={this.incremen}>
  //   Clicked: {this.state.count}
  // </button>

  render() {
    return (
      <div>
        <button className="counter-button" onClick={this.incremen}>
          Clicked: {this.state.count}
        </button>
      </div>
  )}
}

export default Counter;

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from '../counter';

import Enzyme, { shallow, render, mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';

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

test('increment method increments count', (
    const wrapper = mount(<Counter />);

    expect(wrapper.instance().state.count).toBe(0)

    wrapper.instance().increment();
    expect(wrapper.instance().state.count).toBe(1)

) => {})

import React, { useState } from 'react';


const TestHook = (props) => {
  const [state, setState] = useState("Initial State")

  const changeState = () => {
    setState("Initial State Changed")
  }

  const changeNameToSteve = () => {
    props.changeName()
  }

  return (
  <div>
    <button onClick={changeState}>
      State Change Button
    </button>
    <p>{state}</p>
    <button onClick={changeNameToSteve}>
       Change Name
    </button>
    <p>{props.name}</p>
  </div>
  )
}


export default TestHook;

const App = () => {
      const [state, setState] = useState("Some Text")
      const [name, setName] = useState("Moe")
  ...
      const changeName = () => {
        setName("Steve")
      }

      return (
        <div className="App">
         <Basic />
        <h1> Counter </h1>
         <Counter />
        <h1> Basic Hook useState </h1>
         <TestHook name={name} changeName={changeName}/>
    ...

npm install @testing-library/react

import React from 'react'
import ReactDOM from 'react-dom'
import TestHook from '../test_hook.js'
import { render, fireEvent, cleanup } from '@testing-library/react'
import App from '..al/App'

afterEach(cleanup)

it('text in state is changed when button clicked', () => {
    const { getByText } = render(<TestHook />)
    
    expect(getByText(/Initial/i).textContent).toBe("Init State");
    
    fireEvent.click(getByText("State change Button"))

    expect(getByText(/Initial/i).textContent).toBe("Initial State Changed"))
})

it('button click changes props', () => {
    const { getByText } = render(<App><TestHook/></App>)

    expect(getByText(/Moe/i).textContent).toBe("Moe")

    fireEvent.click(getByText("Change Name"))

    expect(getByText(/Steve/i).textContent).toBe("Steve")
})

import * as ACTIONS from './actions'

export const initialState = {
    stateprop1: false,
}

export const Reducer1 = (state = initialState, action) => {
  switch(action.type) {
    case "SUCCESS":
      return {
        ...state,
        stateprop1: true,
      }
    case "FAILURE":
      return {
        ...state,
        stateprop1: false,
      }
    default:
      return state
  }
}

export const SUCCESS = {
  type: 'SUCCESS'
}

export const FAILURE = {
  type: 'FAILURE'
}

Cuối cùng là component sử dụng action và reducer đã định nghĩa

import React, { useReducer } from 'react';
import * as ACTIONS from '../store/actions'
import * as Reducer from '../store/reducer'


const TestHookReducer = () => {
  const [reducerState, dispatch] = useReducer(Reducer.Reducer1, Reducer.initialState)

  const dispatchActionSuccess = () => {
    dispatch(ACTIONS.SUCCESS)
  }

  const dispatchActionFailure = () => {
    dispatch(ACTIONS.FAILURE)
  }


  return (
    <div>
       <div>
        {reducerState.stateprop1
           ? <p>stateprop1 is true</p>
           : <p>stateprop1 is false</p>}
       </div>
       <button onClick={dispatchActionSuccess}>
         Dispatch Success
       </button>
    </div>
  )
}


export default TestHookReducer;

import React from 'react';
import ReactDOM from 'react-dom';
import TestHookReducer from '../test_hook_reducer.js';
import {render, fireEvent, cleanup} from '@testing-library/react';
import * as Reducer from '../../store/reducer';
import * as ACTIONS from '../../store/actions';

afterEach(cleanup)

describe('test the reducer and action', () => {
    import { render } from "ejs";

    it('should return the initial state', () => {
      expect(Reducer.initialState).toEqual({ stateprop1: false })
    });

    it('should change stateprop1 from false to true', () => {
      expect(Reducer.Reducer1(Reducer.initialState, ACTIONS.SUCCESS )).toEqual({ stateprop1: true })
    })
})

it('reducer changes stateprop1 from fals to true', () => {
  const { container, getByText } = render(<TestHookReducer />)

  expect(getByText(/stateprop1 is/i).textContent).toBe("stateprop1 is false")

  fireEvent.click(getByText("Dispatch success"))

  expect(getByText(/stateprop1 is/i).textContent).toBe("stateprop1 is true")
})

import React from 'react'

const Context = React.createContext()

export default Context

Chúng ta sẽ cần một component cha, nắm giữ Context provider. Giá trị truyền vào cho provider sẽ là giá trị state và hàm setState

import React, { useState } from 'react';
import TestHookContext from './components/react-testing-lib/test_hook_context';


import Context from './components/store/context';


const App = () => {
  const [state, setState] = useState("Some Text")
  

  const changeText = () => {
    setState("Some Other Text")
  }


  return (
    <div className="App">
    <h1> Basic Hook useContext</h1>
     <Context.Provider value={{changeTextProp: changeText,
                               stateProp: state
                                 }} >
        <TestHookContext />
     </Context.Provider>
    </div>
  );
}

export default App;

import React, { useContext } from 'react';

import Context from '../store/context';

const TestHookContext = () => {
  const context = useContext(Context)

  return (
    <div>
    <button onClick={context.changeTextProp}>
        Change Text
    </button>
      <p>{context.stateProp}</p>
    </div>
  )
}


export default TestHookContext;

import React from 'react';
import ReactDOM from 'react-dom';
import TestHookContext from '../test_hook_context.js';
import {act, render, fireEvent, cleanup} from '@testing-library/react';
import App from '../../../App'

import Context from '../../store/context';

afterEach(cleanup)

it('context value is updated by child component', () => {
    const { container, getByText } = render(<App>
      <Context.Provider>
        <TestHookContext />
      </Context.Provider>
    </App>)

    expect(getByText(/Some/i).textContent).toBe("Some text")

    fireEvent.click(getByText("Change text"))

    expect(getByText(/Some/i).textContent).toBe("Some other text")
  })

const { container, getByText } = render(<App />)