тестирование реагировать на редукцию - PullRequest
Новая
       10

тестирование реагировать на редукцию

1 голос
/ 01 февраля 2020

У меня есть приложение реагирования, которое использует реаги-редукс, для выбора данных из хранилища используйте функцию «Выбор». У компонента реагирования есть 

function PersonDataView() {
  const name= useSelector(state => state.data.name)
  const dob= useSelector(state => state.data.dob)
  const dispatch = useDispatch()
  const show= () => dispatch({type: 'SHOW'})
  const remove= () => dispatch({type: 'REMOVE'})
  return (
    <div>
      <h2>Person Details</h2>
     <div>
      <button onClick={show}>Show</button>
      <span aria-label="name">{name}</span>
      <span aria-label="dob">{dob}</span>
      <button onClick={remove}>Remove</button>
     </div>
   </div>
  )
}

Я использую библиотеку реагирования для тестирования этого компонента. Существует ли какой-либо API, который облегчает нам тестирование этих компонентов? Я знаю два способа их проверки: 1) Я могу смоделировать хранилище, используя redux-mock-store, а затем обернуть этот компонент компонентом провайдера. 2) смоделируйте метод useSelector в jest 

jest.mock('react-redux', () => ({
  useSelector: () => ({
  })
});

Но проблема использования jest mock заключается в том, что в случае множественного селектора все useSelectors будут возвращать одно и то же смоделированное значение. Используя шутливый способ насмешки, jest.fn (). MockReturnValueOnce () не выглядит правильным для меня.

Ответы [ 2 ]

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

Я бы предложил другой подход - извлекать ваши селекторы в отдельный файл, например, селекторы файлов. js: 

const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;

Затем в тесте вы можете смоделировать useSelector, как показано ниже: 

jest.mock('react-redux', () => ({
  useSelector: jest.fn().mockImplementation(selector => selector()),
});

И раздельные селекторы, например: 

jest.mock('./selectors.js', () => ({
  nameSelector: jest.fn().mockReturnValue("myTestName"),
  dobSelector: jest.fn().mockReturnValue("myTestDob"),
});
0 голосов
/ 17 февраля 2020

Попробуйте это: 

jest.mock('react-router');
const useSelectorMock = useSelector as any;

describe('something', () {

test('name', () => {

// Use this for each useSelector call:
useSelectorMock.mockImplementationOnce(jest.fn(() => returnValue as yourType));
}

}
...