Day 27:我们又回来了redux

来最後几天我们又跳回去React-Testing-Library XDDD
相信还是有很多公司使用redux来当作global store来使用，因此最後几天我们来聊聊redux如何使用RTL来做单元测试．

那接下来写一个非常简单的reducer

const SET_NAME = 'SET_NAME';

const initialState = {
	name: ''
};

const reducer = (state = initialState, action) => {
	switch (action.type) {
		case SET_NAME:
			return {
				name: 'stan'
		}
		
		default:
			return state;
	}
}

再来一个非常简单的component

import { useSelector, useDispatch } from 'react-redux';

const Avatar = () => {
  const name = useSelector(strate => state.name);
  const dispatch = useDispatch();
  
  const handleChangeName = () => dispatch({type: 'SET_NAME' })

  return (
    <>
      <div data-testid="name">
				{name}
			</div>
      <button onClick={handleChangeName}>submit</button>
    </>
  )
}

再来就是一个简单的test case

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import store from './store';
import Avatar from '....';

test('render component with redux', () => {
  const { getByTestId, getByText } = render(
    <Provider store={store}>
      <Avatar />
    </Provider>
  );
  const elem = getByText(/submit/i)
  userEvent.click(elem);
  expect(getByTestId('name')).toHaveTextContent('stan')
})

这样就可以做一个简单的redux整体流程的测试，谢谢大家