如何测试 React 状态是否从 localStorage 重新加载？答案

【问题标题】：How to test if React state is reloaded from localStorage?如何测试 React 状态是否从 localStorage 重新加载？
【发布时间】：2019-12-27 21:46:47
【问题描述】：

我使用 Jest 和 Enzyme 来测试组件，但在重新加载时遇到了问题。我希望我的组件从 localStorage 中检索状态。我还没有实现代码，但测试仍然通过。

  it('can preserve todo group', () => {
    const wrapper = mount(<TodosContainer />);
    wrapper.find('input[name="todo-container-form"]').simulate('change', { target: { value: 'Loy' } });
    wrapper.find('button').simulate('click');
    // eslint-disable-next-line no-undef
    window.location.reload();
    /* This is where it should fail without implementation
    I didn't add any localStorage code in my component. */
    expect(wrapper.find(TodosGroup).first().prop('name')).toMatch('Loy');
  });

这是我的组件，其中不相关的部分已被编辑。

const TodosContainer = () => {
  const [todosGroups, setTodosGroups] = useState([]);
  const [groupName, setGroupName] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const addTodoGroups = (todoGroup: ITodoGroup) => {
    setTodosGroups([...todosGroups, todoGroup]);
  };
  const changeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setGroupName(e.target.value);
  };
  const handleClick = () => {
    if (groupName.length > 0) {
      addTodoGroups({ name: groupName, key: Date.now() });
      setGroupName('');
      setErrorMessage('');
    } else {
      setErrorMessage('Group name must not be empty');
    }
  };
  return (
    <div    >
      <div      >
        {errorMessage.length > 0 ? <ErrorMessage css={css`width: 100%`}>{errorMessage}</ErrorMessage> : ''}
        <TextInput name="todo-container-form" className="todoGroupName" value={groupName} onChange={changeName} />
        <Button type="button" onClick={handleClick}>Add</Button>
      </div>
      {todosGroups.length > 0 ? todosGroups.map((todoGroup) => (
        <div
          key={todoGroup.key}
        >
          <TodosGroup name={todoGroup.name} />
        </div>
      )) : (
        <p>
        No todos group
        </p>
      )}
    </div>
  );

};

export default TodosContainer;

【问题讨论】：

标签： javascript reactjs jestjs local-storage

【解决方案1】：

因为 jest 使用 JSDom 而不是真正的浏览器 window.location.reload(); 什么都不做。另外恐怕jsdom也没有实现localStorage（但很容易to mock that）

您想确保在重新创建组件后，它会从本地存储中获取状态，对吧？

这种方式（经过适当的模拟localStorage）你可能只是unmount 组件并再次挂载它：

wrapper.unmount();
const newOne = mount(<TodosContainer />);
expect(newOne.find(TodosGroup).first().prop('name')).toMatch('Loy');

这里不需要显式卸载，但我宁愿让它完全模拟条件（例如，它将运行componentWillUnmount/useEffect，这可能是逻辑的一部分）。

【讨论】：