Add warning message to fireEvent input and change when called directly #83

src/__tests__/fire-event.js

@@ -119,6 +119,13 @@ const eventTypes = [
     elementType: 'div',
   },
 ]
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
 
 // For each event type, we assert that the right events are being triggered
 // when the associated fireEvent method is called.
@@ -181,6 +188,32 @@ test('calling `fireEvent` directly works too', async () => {
 
   expect(emitted()).toHaveProperty('click')
 })
+const typingEvents = ['input', 'change']
+typingEvents.forEach(event => {
+  test(`fireEvent.${event} prints a warning message to use fireEvent.update instead`, async () => {
+    const {getByTestId} = render({
+      template: `<input type="text" data-testid=test-${event}></input>`,
+    })
+
+    await fireEvent.change(getByTestId(`test-${event}`), 'hello')
+
+    expect(console.warn).toHaveBeenCalledTimes(1)
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'By using "change" or "input", there may be unexpected issues. Please use "update" for a better experience.',
+      ),
+    )
+  })
+})
+test('fireEvent.update does not trigger warning messages', async () => {
+  const {getByTestId} = render({
+    template: `<input type="text" data-testid=test-update></input>`,
+  })
+
+  await fireEvent.update(getByTestId('test-update'), 'hello')
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
 
 test('fireEvent.update does not crash if non-input element is passed in', async () => {
   const {getByText} = render({
@@ -194,4 +227,5 @@ test('fireEvent.update does not crash if non-input element is passed in', async
       Hi
     </div>
   `)
+  expect(console.warn).not.toHaveBeenCalled()
 })

src/__tests__/form.js

@@ -8,6 +8,7 @@ import Form from './components/Form'
 // Read 'What queries should I use?' for additional context:
 // https://testing-library.com/docs/guide-which-query
 test('Review form submits', async () => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
   const fakeReview = {
     title: 'An Awesome Movie',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
@@ -61,4 +62,5 @@ test('Review form submits', async () => {
   // Assert the right event has been emitted.
   expect(emitted()).toHaveProperty('submit')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+  expect(console.warn).not.toHaveBeenCalled()
 })

src/vue-testing-library.js

@@ -113,9 +113,16 @@ async function fireEvent(...args) {
   dtlFireEvent(...args)
   await waitFor(() => {})
 }
+const changeOrInputEventCalledDirectly = (eventValue, eventKey) =>
+  eventValue && (eventKey === 'change' || eventKey === 'input')
 
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = async (...args) => {
+    if (changeOrInputEventCalledDirectly(args[1], key)) {
+      console.warn(
+        'By using "change" or "input", there may be unexpected issues. Please use "update" for a better experience.',
+      )
+    }
     dtlFireEvent[key](...args)
     await waitFor(() => {})
   }