afenton90 commented 4 years ago

Upgrades version of @vue/test-utils to ^1.0.1.

Replace attachToDocument with attachTo and mirror default behaviour
Remove guard for wrapper.destroy as destroy must always be called now is using attachTo see @vue/test-utils docs here.
~Adds config.showDeprecationWarnings = false as isVueInstance is still used internally by @vue/test-utils and gives warnings.~

closes #138

afenton90 commented 4 years ago

☝️ test failed because Cannot find module '@babel/compat-data/corejs3-shipped-proposals' doesn't seem to have change in package-lock.json file though.

marcpeabody commented 4 years ago

Does this still need work before it can be merged? I see the CI failing Error: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

afontcu commented 4 years ago

Does this still need work before it can be merged? I see the CI failing Error: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

hey! yes, it is still WIP. It's been a busy week and I couldn't move it forward. I'll try to find some time, but happy to see it move forward if anyone's interested!

Things I'd like to see fixed before merging this

[x] Is the failing vuetify.js test an upstream issue with VTU, or it is on Vue Testing Lib? I'm a bit worried it is related with how we're attaching to the container (here).
[x] Fix CI

afenton90 commented 4 years ago

@afontcu I tried a few different versions of the upgrade to see if I could figure out why the test has to be changed. Unfortunately, I have no extra information on top of my last comment here https://github.com/testing-library/vue-testing-library/pull/139#discussion_r420861756 which is my best theory at the moment.

As for fixing of CI it seems to be specific to node 14 build. I can't see anything directly correlated with code changes in the PR.

Any help to get this over the line would be appreciated.

afontcu commented 4 years ago

As for fixing of CI it seems to be specific to node 14 build. I can't see anything directly correlated with code changes in the PR.

Looks like it was fixed in kcd-scripts v5.11.1: https://github.com/kentcdodds/kcd-scripts/issues/139. Just pushed a version bump, all green now :)

codecov[bot] commented 4 years ago

Codecov Report

Merging #139 into master will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #139   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines           68        69    +1     
  Branches        14        13    -1     
=========================================
+ Hits            68        69    +1

Impacted Files	Coverage Δ
src/vue-testing-library.js	`100.00% <100.00%> (ø)`

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 22c34f7...dc38df6. Read the comment docs.

kuddl commented 4 years ago

Please merge?? Sounds like it's ready to go ? And our consoles are cluttered with error messages!

afontcu commented 4 years ago

Please merge?? Sounds like it's ready to go ? And our consoles are cluttered with error messages!

I really want to figure out what's going on with Vuetify test (https://github.com/testing-library/vue-testing-library/pull/139/files#r420852127) before merging this!

spacedawwwg commented 4 years ago

@afenton90 …fancy seeing you here! 🤣

afontcu commented 4 years ago

:tada: This PR is included in version 5.0.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

mediafreakch commented 4 years ago

@afontcu Just to let you know: @vue/test-utils@1.0.0 now stubs transitions by default. After updating, some of my tests were failing because of this. The solution was to disable stubbing for transitions for those tests:

it('should mount', () => {
  /* MyComponent wrapped <v-snackbar /> which uses <transition> */
  const { getByText } = render(MyComponent, {
    props: {},
    stubs: {
      transition: false;
    }
  })
})

Maybe this belongs to the release docs here to avoid someone else having to google the solution :)

After updating I also have Typescript errors coming from @types/vue-testing-library__vue:

ERROR in .../node_modules/@types/testing-library__vue/node_modules/vuex/types/vue.d.ts(10,5):
10:5 Subsequent property declarations must have the same type.  Property 'store' must be of type 'Store<any> | undefined', but here has type 'Store<any> | undefined'.
     8 | declare module "vue/types/options" {
     9 |   interface ComponentOptions<V extends Vue> {
  > 10 |     store?: Store<any>;
       |     ^
    11 |   }
    12 | }
    13 |

I temporarily disabled the errors by adding the following to my tsconfig.json:

...,
compilerOptions: {
  skipLibCheck: true
}

afontcu commented 4 years ago

Hi! Thanks for the insights. How did your test break? Sync vs. async behaviour? Could you share the failing component / test?

Property 'store' must be of type 'Store<any> | undefined', but here has type 'Store<any> | undefined'.

you gotta love typescript errors 😅

mediafreakch commented 4 years ago

@afontcu Here's the failing test:

describe('ErrorMessage', () => {
  it('should not be visible by default', () => {
    const { queryByTestId } = render(ErrorMessage, {})

    expect(queryByTestId('snackbar')).toBe(null)
  })
})

The test failed with:

Expected: null
Received: <transition-stub data-testid="snackbar" name="v-snack-transition" />

Here the tested component (I removed some parts that are unrelated to the initial render):

<template>
  <v-snackbar :value="isVisible" multi-line :timeout="0" color="secondary" data-testid="snackbar">
    <span>
      {{ message }}
    </span>
  </v-snackbar>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    props: {
      errorCode: Number,
      errorIsIntrusive: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        isVisible: false
      }
    },
    watch: {
      errorCode: {
        handler: function(newVal) {
          if (newVal) {
            // we show only if error is not intrusive (intrusive errors are handled elsewhere)
            this.isVisible = !!newVal && !this.errorIsIntrusive
          }
        },
        immediate: true
      },
    },
    computed: {
      message(): string {
        return `${this.$t('Error.TextForCode', { code: this.errorCode })}`
      }
    },
  })
</script>

afontcu commented 4 years ago

Cool! Thanks for the info. I'll add the information in the v5.0.3 release, so that people can find it easily.

testing-library / vue-testing-library

fix: update VTU to v1, update types #139

Codecov Report