Remove export of wrapper from render to reduce surface area

Author: dfcook

src/__tests__/components/StopWatch.vue

@@ -20,11 +20,6 @@ export default {
     }
   },
   methods: {
-    handleClearClick () {
-      clearInterval(this.timer)
-      this.lapse = 0
-      this.running = false
-    },
     handleRunClick () {
       if (this.running) {
         clearInterval(this.timer)
@@ -36,7 +31,7 @@ export default {
         })
       }
 
-      this.running = !this.running      
+      this.running = !this.running
     }
   },
   beforeDestroy () {

src/__tests__/fetch.js

@@ -9,7 +9,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
     }),
   )
 
-  const {wrapper, getByText} = render(Fetch, { props: { url: '/greeting' } })
+  const {html, getByText} = render(Fetch, { props: { url: '/greeting' } })
 
   // Act
   Simulate.click(getByText('Fetch'))
@@ -19,5 +19,5 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   expect(axiosMock.get).toHaveBeenCalledTimes(1)
   expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
   expect(getByText('hello there').textContent).toBe('hello there')
-  expect(wrapper.html()).toMatchSnapshot()
+  expect(html()).toMatchSnapshot()
 })

src/__tests__/form.js

@@ -5,27 +5,26 @@ import Login from './components/Login'
 test('login form submits', () => {
   const fakeUser = {username: 'jackiechan', password: 'hiya! 🥋'}
   const handleSubmit = jest.fn()
-  const {wrapper, getByLabelText, getByText} = render(
+  const {updateState, getByLabelText, getByText} = render(
     Login, { props: { onSubmit: handleSubmit } }
   )
 
   const usernameNode = getByLabelText('username')
   const passwordNode = getByLabelText('password')
-  const formNode = wrapper.find('form')
   const submitButtonNode = getByText('submit')
 
   // Act - this is waiting on an issue in @vue/test-utils to allow v-model to be updated by
   // changes to DOM elements
-  
+
   // Simulate.change(usernameNode, fakeUser.username)
   // Simulate.change(passwordNode, fakeUser.password)
-  wrapper.setData(fakeUser)
+  updateState(fakeUser)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission
   // by clicking on the submit button. This is really unfortunate.
   // So the next best thing is to simulate a submit on the form itself
   // then ensure that there's a submit button.
-  Simulate.submit(formNode)
+  Simulate.click(submitButtonNode)
 
   // Assert
   expect(handleSubmit).toHaveBeenCalledTimes(1)

src/__tests__/number-display.js

@@ -2,10 +2,10 @@ import NumberDisplay from './components/NumberDisplay.vue'
 import { render } from '../'
 
 test('calling render with the same component but different props does not remount', () => {
-  const { queryByTestId, wrapper } = render(NumberDisplay, { props: { number: 1 } })
+  const { queryByTestId, updateProps } = render(NumberDisplay, { props: { number: 1 } })
   expect(queryByTestId('number-display').textContent).toBe('1')
 
-  wrapper.setProps({ number: 2 })
+  updateProps({ number: 2 })
   expect(queryByTestId('number-display').textContent).toBe('2')
-  expect(queryByTestId('instance-id').textContent).toBe('1') 
+  expect(queryByTestId('instance-id').textContent).toBe('1')
 })

src/__tests__/stopwatch.js

@@ -7,11 +7,11 @@ const wait = time => new Promise(resolve => setTimeout(resolve, time))
 test('unmounts a component', async () => {
   jest.spyOn(console, 'error').mockImplementation(() => {})
 
-  const { unmount, getByText, wrapper } = render(StopWatch)
+  const { unmount, isUnmounted, getByText, wrapper } = render(StopWatch)
   Simulate.click(getByText('start'))
 
   unmount()
-  expect(wrapper.vm._isDestroyed).toBe(true)
+  expect(isUnmounted()).toBe(true)
 
   await wait()
   expect(console.error).not.toHaveBeenCalled()

src/__tests__/vue-router.js

@@ -13,14 +13,8 @@ const routes = [
 test('full app rendering/navigating', () => {
   const { wrapper, queryByTestId } = render(App, { routes })
   // normally I'd use a data-testid, but just wanted to show this is also possible
-  expect(wrapper.vm.$route.fullPath).toBe('/')
+  expect(queryByTestId('location-display').textContent).toBe('/')
   Simulate.click(queryByTestId('about-link'))
   // normally I'd use a data-testid, but just wanted to show this is also possible
   expect(queryByTestId('location-display').textContent).toBe('/about')
 })
-
-test('landing on a bad page', () => {
-  const { wrapper, queryByTestId } = render(App, { routes })
-  wrapper.vm.$router.push({ name: 'some-bad-route' })
-  expect(queryByTestId('location-display').textContent).toBe('/')
-})

src/index.js

@@ -37,8 +37,11 @@ function render(TestComponent, { props = null, store = null, routes = null } = {
   )
 
   return {
-    wrapper,
     unmount: () => wrapper.destroy(),
+    isUnmounted: () => wrapper.vm._isDestroyed,
+    html: () => wrapper.html(),
+    updateProps: _ => wrapper.setProps(_),
+    updateState: _ => wrapper.setData(_),
     ...wrapperHelpers
   }
 }