# \[solved\] Testing \<compose\>

**URL:** <https://discourse.aurelia.io/t/solved-testing-compose/3404>\
**Category:** Help Requests\
**Created:** [April 18, 2020, 8:00pm UTC](https://discourse.aurelia.io/t/solved-testing-compose/3404 "2020-04-18T20:00:52Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![LetsZiggy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/letsziggy/32/2312_2.png) [@LetsZiggy](https://discourse.aurelia.io/u/LetsZiggy)\
**Post date:** [April 30, 2020, 8:27pm UTC](https://discourse.aurelia.io/t/solved-testing-compose/3404/12 "2020-04-30T20:27:34Z")

</div>

**my bad … I misread the answer given 😬. You correctly showed to test as custom-element.**

I think I’ve figured out how to test a `<compose>` element. Test `<compose>` as custom element; i.e. `.inView('<compose-elem></compose-elem>')`

[github repo](https://github.com/LetsZiggy/testing-au-compose-element)

Thanks @Sayan751 and @bigopon for helping me on this

```auto
import { bootstrap } from "aurelia-bootstrapper"
import { StageComponent } from "aurelia-testing"

const sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))

describe("Compose-Elem", () => {
  let component

  beforeEach(async (done) => {
    /*
    component = StageComponent
      .withResources("compose-elem")
      .inView(`<compose></compose>`)
      .manuallyHandleLifecycle()
    */

    component = StageComponent
      .withResources("compose-elem")
      .inView(`<compose-elem></compose-elem>`)
      .manuallyHandleLifecycle()

    done()
  })

  afterEach(async (done) => {
    component
      .dispose()

    done()
  })

  describe("Test Group", async () => {
    it("test unit", async (done) => {
      await component.create(bootstrap)
      await component.bind(undefined)
      component.viewModel.activate("new data")
      await component.attached()

      const viewModel = component.viewModel
      const element = component.element
      expect(element.querySelector("div").textContent)
        .toContain("stuff = new data")

      viewModel.stuff = "extra new data"
      await sleep(200)
      expect(element.querySelector("div").textContent)
        .toContain("stuff = extra new data")

      await component.detached()
      await component.unbind()

      done()
    })
  })
})

```

Edits:

- Update code in post
- Add where I went wrong…please see [post](https://discourse.aurelia.io/t/solved-testing-compose/3404/10)

---

_[View the full topic](https://discourse.aurelia.io/t/solved-testing-compose/3404)._