テスト(Jest)で `data-xx`属性の値だけを取り出したい

Question

Jestで書いているテストについて質問があります。
書きたいテストとしては、例えば以下のようなDOMがあるとして、このDOM内の全てのdata-apple-color属性の値を取得し配列化したものが、定数(const ARRAY = ['blue', 'red', 'green'])と等しいかどうか(順不同)テストしたいです。

<div>
  <li data-apple-color="blue" />
  <li data-apple-color="red" />
  <li data-apple-color="green" />
</div>

途中まで書いたテストは以下です

import { render } from 'enzyme'
import * as React from 'react'

import 'html-validate/jest'

describe('hoge', () => {
  const dom = render(
    <div>
      <li data-apple-color="blue" />
      <li data-apple-color="red" />
      <li data-apple-color="green" />
    </div>
  )

  test('hoge', () => {
    const colors = dom.find('[data-apple-color]') # data-apple-colorを含むdom3つを取得
    expect(colors.length).toEqual(3) # この時点では<li data-apple-color="xxx" />を3つ取得できている
    # TODO: 
  })
}

ここで、あとはcolorsの中からdata-apple-color属性の値を3つ(blue, red, green)取得し、それを配列化したものと定数(const ARRAY = ['blue', 'red', 'green'])が等しいかどうかテストしたいたいです。
最初はconst ary = colors.prop('data-apple-color')で取得できるかと思ったのですが、これだと最初の<li data-apple-color="xxx" />の値(= blue)しか取得できませんでした。
また、mapを用いてconst ary = colors.map((_, el) => el.prop('data-apple-color'))も試してみたのですが、これだとpropのところでProperty 'prop' does not exist on type 'Element'. Property 'prop' does not exist on type 'TextElement'.と怒られてしまいました。

domから'data-xx'属性の値だけを取り出す方法をご存知の方がいらっしゃいましたら教えていただきたいです????‍♀️

Answer 1