使用 redux-toolkit 进行酶浅测试

Question

所以我有一个使用来自 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();
  });
});

could not find react-redux context value; please ensure the component is wrapped in a Provider

Answer 1

我认为 enzyme 理解 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();
  });
});

使用 redux-toolkit 进行酶浅测试

Enzyme shallow test with redux-toolkit

reactjs

unit-testing

react-redux

enzyme

redux-toolkit