Как проверить, имеет ли компонент правильное значение в подпорках из mapStateToProps

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' });
  });
});

Надеюсь, это поможет