使用 redux-toolkit 进行酶浅测试答案

【问题标题】：Enzyme shallow test with redux-toolkit使用 redux-toolkit 进行酶浅测试
【发布时间】：2021-06-04 21:52:24
【问题描述】：

所以我有一个使用 redux 工具包中的状态的反应组件，所以我没有装饰组件并将状态作为道具传递。但是当我尝试测试我的组件时，它给了我一个错误，说它应该被包装在一个提供程序中。如何测试使用 redux 状态但没有像 prop 一样接收状态的组件？我是否需要在测试中创建具有状态的提供程序？

我的组件：

import React, { KeyboardEvent } from 'react';
import {
  Row, Col, FormControl, Button,
} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
import { useAppDispatch, useAppSelector } from '../../store/types';
import {
  descriptionChanged, descriptionCleared, fetchTodos, addTodos,
} from '../../store/todoReducer';
import './styles.css';

function TodoForm() {
  const description = useAppSelector((state) => state.todo.description);
  const dispatch = useAppDispatch();

  function handleAdd() {
    if (description.length > 0) {
      dispatch(addTodos(description));
    }
  }

  function keyHandler(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      if (e.shiftKey) {
        dispatch(fetchTodos(description));
      } else {
        handleAdd();
      }
    }
    if (e.key === 'Escape') { dispatch(descriptionCleared()); }
  }

  return (
    <form className="todoForm">
      <Row>
        <Col xs={12} md={10} sm={9}>
          <FormControl
            value={description}
            onChange={(e) => dispatch(descriptionChanged(e.target.value))}
            onKeyUp={(e: KeyboardEvent) => keyHandler(e)}
            placeholder="Adicione uma tarefa"
            id="description"
          />
        </Col>
        <Col xs={12} md={2} sm={3}>
          <Button onClick={() => handleAdd()} variant="primary">
            <FontAwesomeIcon icon={faPlus} />
          </Button>
          <Button onClick={() => dispatch(fetchTodos(description))} variant="info">
            <FontAwesomeIcon icon={faSearch} />
          </Button>
          <Button onClick={() => dispatch(descriptionCleared())} variant="secondary">
            <FontAwesomeIcon icon={faTimes} />
          </Button>
        </Col>
      </Row>
    </form>
  );
}

export default TodoForm;

这是我的测试和错误：

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
import { configure, shallow } from 'enzyme';
import TodoForm from '../components/TodoForm';

configure({ adapter: new Adapter() });

describe('TodoForm Component', () => {
  it('should render TodoForm correctly', () => {
    const component = shallow(<TodoForm />);
    expect(component).toBeTruthy();
  });
});

找不到 react-redux 上下文值；请确保组件被包裹在一个Provider中

【问题讨论】：

标签： reactjs unit-testing react-redux enzyme redux-toolkit

【解决方案1】：

我认为酶理解 redux 的唯一方法是确实将组件包装在提供程序中：

...
import {Provider} from "react-redux";
import store from "path/to/your/store";

describe('TodoForm Component', () => {
  it('should render TodoForm correctly', () => {
    const component = shallow(
        <Provider store={store}>
            <TodoForm />
        </Provider>
    );
    expect(component).toBeTruthy();
  });
});

【讨论】：