Javascript 测试行动、减速器和；反应中的语境

我使用钩子和上下文构建了多个React功能组件。一切正常。现在我需要为所有内容编写测试。我对如何与他们中的一些人一起前进感到困惑，所以我想接触社区

行动 以下是我的一个操作文件中的示例：

export const ADD_VEHICLE: 'ADD_VEHICLE' = 'ADD_VEHICLE';
export const UPDATE_VEHICLE: 'UPDATE_VEHICLE' = 'UPDATE_VEHICLE';

type AddVehicleAction = {type: typeof ADD_VEHICLE, isDirty: boolean};
type UpdateVehicleAction = {type: typeof UPDATE_VEHICLE, id: number, propName: string, payload: string | number};

export type VehiclesActions = 
     | AddVehicleAction
     | UpdateVehicleAction;

我应该如何测试此操作文件？我不是说和其他任何东西结合在一起，我是说它，而且只有它？ 从评论来看，我似乎同意在这个文件中没有什么可以直接测试的

减速器 我的每个Reducers文件都直接连接到并支持特定的上下文。下面是我的一个Reducers文件的示例：

import type { VehiclesState } from '../VehiclesContext';
import type { VehiclesActions } from '../actions/Vehicles';
import type { Vehicle } from '../SharedTypes';

import { ADD_VEHICLE,
         UPDATE_VEHICLE
       } from '../actions/Vehicles';

export const vehiclesReducer = (state: VehiclesState, action: VehiclesActions) => {
  switch (action.type) {

  case ADD_VEHICLE: {
    const length = state.vehicles.length;
    const newId = (length === 0) ? 0 : state.vehicles[length - 1].id + 1;
    const newVehicle = {
      id: newId,
      vin: '',
      license: ''
    };

    return {
      ...state,
      vehicles: [...state.vehicles, newVehicle],
      isDirty: action.isDirty
    };
  }

  case UPDATE_VEHICLE: {
    return {
      ...state,
      vehicles: state.vehicles.map((vehicle: Vehicle) => {
        if (vehicle.id === action.id) {
          return {
            ...vehicle,
            [action.propName]: action.payload
          };
        } else {
          return vehicle;
        }
      }),
      isDirty: true
    };
  }

如果您只想为这个Reducers文件构建测试，您会使用什么方法？我的想法是这样渲染DOM：

function CustomComponent() {
  const vehiclesState = useVehiclesState();
  const { isDirty,
          companyId,
          vehicles 
        } = vehiclesState;  
  const dispatch = useVehiclesDispatch();

  return null;
}

function renderDom() {
  return {
    ...render(
      <VehiclesProvider>
        <CustomComponent />
      </VehiclesProvider>
    )  
  };
}

函数CustomComponent（）{
const vehiclesState=useVehiclesState（）；
常数{isDirty，
公司ID，
车辆
}=车辆状态；
const dispatch=useVehiclesDispatch（）；
返回null；
}
函数renderDom（）{
返回{
…渲染(
)  
};
}

虽然上面的代码确实在运行，但我现在的问题是，在我的测试代码中，

vehiclestate

和

dispatch

都无法访问，因此我试图找出如何“显示”每个

描述/it

构造中的那些。如有任何建议，将不胜感激

上下文

---

我的上下文遵循Kent C.Dodds概述的相同模式：-其中StateContext和DispatchContext是分开的，并且有一个默认状态。考虑到这种代码模式，并且考虑到我已经有了一个单独的测试文件用于上下文的缩减器，那么一个测试可以只针对上下文做什么呢？

与我的评论相同，我真的认为您应该阅读，以便大致了解应该做什么

但是由于您已经有了一个reducer，所以您希望编写测试用例来遵循这个模式

每个操作至少有一个测试

每个测试将有一个“先前状态”，该状态将被更改

您将调用reducer，传递操作和前一个状态

您将断言您的新状态与预期状态相同

下面是一个代码示例：

it('adds a new car when there are no cars yet', () => {
  // you want to put here values that WILL change, so that you don't risk
  // a false positive in your unit test
  const previousState = {
    vehicles: [],
    isDirty: false,
  };

  const state = reducer(previousState, { type: ADD_VEHICLE });

  expect(state).toEqual({
    vehicles: [{
      id: 1,
      vin: '',
      license: '',
    }],
    isDirty: true,
  });
});

it('adds a new car when there are existing cars already, () => {
  // ...
});

我还建议使用action creators，而不是直接创建action对象，因为它更具可读性：

// actions.js
export const addVehicle = () => ({
  type: ADD_VEHICLE
})

// reducer.test.js
it('adds a new car when there are no cars yet', () => {
  //...
  const state = reducer(previousState, actions.addVehicle());

---

和我的评论一样，我真的认为你应该阅读，这样你就可以大致了解该做什么

但是由于您已经有了一个reducer，所以您希望编写测试用例来遵循这个模式

每个操作至少有一个测试

每个测试将有一个“先前状态”，该状态将被更改

您将调用reducer，传递操作和前一个状态

您将断言您的新状态与预期状态相同

下面是一个代码示例：

it('adds a new car when there are no cars yet', () => {
  // you want to put here values that WILL change, so that you don't risk
  // a false positive in your unit test
  const previousState = {
    vehicles: [],
    isDirty: false,
  };

  const state = reducer(previousState, { type: ADD_VEHICLE });

  expect(state).toEqual({
    vehicles: [{
      id: 1,
      vin: '',
      license: '',
    }],
    isDirty: true,
  });
});

it('adds a new car when there are existing cars already, () => {
  // ...
});

我还建议使用action creators，而不是直接创建action对象，因为它更具可读性：

// actions.js
export const addVehicle = () => ({
  type: ADD_VEHICLE
})

// reducer.test.js
it('adds a new car when there are no cars yet', () => {
  //...
  const state = reducer(previousState, actions.addVehicle());

---

那感觉太宽了！另外，这取决于你想测试什么，然后实现主要是基于意见的。你问什么真的不清楚。您上面发布的代码，只是类型声明，没有什么需要测试的。你可能想用更明确的方式更新你的帖子question@EmileBergeron你能详细解释一下吗？@ChristopherFrancisco我已经根据你的反馈更新了这个问题。首先，我相信我同意您的观点，即测试操作文件是不可能/不必要的。您将如何测试我所概述的Reducers文件。测试上下文（使用类似于Kent C.Dodds的代码）是不必要的，因为在测试Reducer时执行了所有的基本操作吗？您阅读过关于编写测试的redux文档吗？这对你来说可能是一个好的开始，感觉太宽泛了！另外，这取决于你想测试什么，然后实现主要是基于意见的。你问什么真的不清楚。您上面发布的代码，只是类型声明，没有什么需要测试的。你可能想用更明确的方式更新你的帖子question@EmileBergeron你能详细解释一下吗？@ChristopherFrancisco我已经根据你的反馈更新了这个问题。首先，我相信我同意您的观点，即测试操作文件是不可能/不必要的。您将如何测试我所概述的Reducers文件。测试上下文（使用类似于Kent C.Dodds的代码）是不必要的，因为在测试Reducer时执行了所有的基本操作吗？您阅读过关于编写测试的redux文档吗？这对你来说可能是个好的开始谢谢你！我现在就看你介绍给我的文件。非常感谢！我现在就看你介绍给我的文件。