automatically clean up aftereach with optout using VTL_SKIP_AUTO_CLEANUP

[Oluwasetemi]

Closes #77

• Automatically call afterEach(cleanup) if afterEach exists.
• Add an opt-out mechanism by using VTL_SKIP_AUTO_CLEANUP.
• Add tests asserting the behavior outlined above.
• Remove cleanup references from tests and docs.
• Replace cleanup-after-each with a warning.
• State that the change is a breaking change.

[codecov]

Codecov Report

Merging #80 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master    #80   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines          63     66    +3     
  Branches       10     12    +2     
=====================================
+ Hits           63     66    +3

Impacted Files	Coverage Δ
src/vue-testing-library.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 297c1c1...5af5d16. Read the comment docs.

[dfcook]

This looks good, can you add a couple of tests illustrating the usage of VTL_SKIP_AUTO_CLEANUP?

[Oluwasetemi]

I will add the test to it right away

[Oluwasetemi]

Can you please take a look at this!

[Oluwasetemi]

Done!!!

[afontcu]

Hi @Oluwasetemi! This looks awesome, thank you 🙌

I was making sure everything was in place, and came up with an idea.

What if we used toMatchInlineSnapshot() (docs) to generate the snapshots to check against?

// auto-cleanup-skip.js

test('first test render a vue component', () => {
  render({
    template: `<h1>Hello World</h1>`
  })

  expect(document.body.innerHTML).toMatchInlineSnapshot(`
    <div>
      <h1>Hello World</h1>
    </div>
  `)
})

test('no cleanup should have happened, renders the first component still', () => {
  expect(document.body.innerHTML).toMatchInlineSnapshot(`
        <div>
          <h1>Hello World</h1>
        </div>
    `)
})

// auto-cleanup.js

test('render the first component', () => {
  render({
    template: `<h1>Hello World</h1>`
  })

  expect(document.body.innerHTML).toMatchInlineSnapshot(`
                <div>
                  <h1>Hello World</h1>
                </div>
        `)
})

test('cleans up after each test by default', () => {
  expect(document.body.innerHTML).toMatchInlineSnapshot(`""`)
})

What do you think about it? I just wrote expect(document.body.innerHTML).toMatchInlineSnapshot() and let Jest create the initial version. Looks like a good use case for snapshot testing!

[Oluwasetemi]

It definitely looks better. This is way better than the previous implementation of the tests.

It will be visible to anyone who checks through the test to understand the cleanup and auto clean up properly.

[afontcu]

This looks great to me 👌

[Oluwasetemi]

How will the docs be updated?

[afontcu]

How will the docs be updated?

Docs live in https://github.com/testing-library/testing-library-docs/, so a PR should be created there with the appropriate changes.

[dfcook]

Agree with @afontcu , great work, thanks for this

[afontcu]

Just a small note: we are exploring ways of automating CI/CD (see #85 #86), and I believe this PR is a great way of checking the new workflow. This is why is not merged yet, even though it looks great and all work is done 👍

[afontcu]

🎉 This PR is included in version 3.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀