Question

我正在开发一个组件，该组件可以帮助我管理用户角色。根据角色，我想控制应用程序显示的内容。我正在将权限传递给UserAccess组件，如果存储中的值包含该权限，它将显示其他组件。另外，我想检查组件是否从mapStateToProps获得了正确的值。

组件：

export function UserAccess({ userRoles, permission, ...props }: any) {

    if (userRoles.includes(permission)) {
        return props.children
    }
    return ''
}

function mapStateToProps(state: any) {    

    return {
        userRoles: state.roles ? state.roles : []
    }
}

export default connect(mapStateToProps)(UserAccess)

用法：

<UserAccess permission={'admin'}>Some component</UserAccess>

测试：

const mockStore = configureStore();
const store = mockStore({roles: "admin"})

it("should map state to props", () => {
    const wrapper = mount(<Provider store={store} ><UserAccess ></UserAccess></Provider>)
    expect(wrapper.find(UserAccess).prop('userRoles')).toBe('admin');
})

Answer 1

您可以进行以下测试：

describe('User Access', () => {
  let store;
  beforeEach(() => {
    store = mockStore({
      userRoles: {
        role: 'admin',
      },
    });
  });
  it('should render UserAcess with the correct props', () => {
    const wrapper = mount(
      <Provider store={store}>
        <UserAccess />
      </Provider>
    );

    const container = wrapper.find(UserAccess);
    expect(container.find(UserAccess).props().userRoles).to.eql({ role: 'admin' });
  });
});

希望有帮助

如何从mapStateToProps的props中检查组件是否具有正确的值

1 个答案: