trying to set value to context provider for a cypress test spec

Question

the challenge am having is explained below

Am trying to set a draft_id value after the submit-recipients data-testid is clicked. The beforementioned value is passed to a React ContextProvider that wraps my component named SendSurvey which in fact uses the draft_id value

My 2 questions are

1. How do I import the SendSurvey component to the test spec written below?

   I have tried out doing this import SendSurvey from '.../../src/website/Surveys/SendSurvey' in my cypress test files but I get this import error Just as a side note, I had imported this import { mount } from '@cypress/react' but it caused my cy.visitto fail

2. How do I wrap my ContextProvider around the SendSurvey component (assuming we imported this component successfully) and pass in the draft_id value to its ContextProvider?

   Worth mentioning that I have imported React and createContext hooks from React successfully as such

       import * as React from 'react'
       import { createContext } from 'react'
   
       /*lines skipped here*/
       //what i want to do is to create a context provider and
       //      pass in the value of the draft id to be used to get draft data
       const SendSurveyContext = createContext({})
       const SendSurveyProvider = SendSurveyContext.Provider
   

The actual test spec

   describe('Send Message To all contacts', () => {
    beforeEach(() => {
        cy.intercept('GET', `**/surveys/1`, {
            fixture: 'surveys/survey_draft.json',
        })
        cy.intercept('GET', `**/surveys/1/survey_questions?**`, {
            fixture: 'surveys/survey_questions_draft.json',
        })
    })
    it.only('should successfully select all contacts from the api', () => {
        cy.intercept('POST', '**/drafts', {
            fixture: 'sendsurveys/contacts_draft_success.json',
        }).as('createContactsDraft')

        cy.intercept('GET', '**/contacts?**', {
            fixture: 'sendsurveys/all_contacts.json',
        }).as('fetchAllContacts')
               cy.visit('/send-survey/1')
        cy.get('[data-testid=all-contacts]').click()

        cy.wait('@fetchAllContacts')
        cy.get('[data-testid=submit-recipients]').click()
        cy.contains('Successfully added the contacts.')
                
               // this is where I would like to wrap my context provider around the `SendSurvey` component and 
               //   pass in the draft_id value

    })
  })

Answer 1

import { mount } from '@cypress/react'
import SendSurvey from '.../../src/website/Surveys/SendSurvey'
import sendSurveyprops from '../fixtures/surveys/sendSurvey/sendSurveyProps'
import draftId from '../fixtures/surveys/sendSurvey/draftId'


 describe('Send Message To all contacts', () => {
    beforeEach(() => {
        cy.intercept('GET', `**/surveys/1`, {
            fixture: 'surveys/survey_draft.json',
        })
        cy.intercept('GET', `**/surveys/1/survey_questions?**`, {
            fixture: 'surveys/survey_questions_draft.json',
        })
    })

        mount(
              <UserContext.Provider value={draftId}>
                   <SendSurvey props={sendSurveyprops} />
              </UserContext.Provider> 
        )
 
    it.only('should successfully select all contacts from the api', () => {
        cy.intercept('POST', '**/drafts', {
            fixture: 'sendsurveys/contacts_draft_success.json',
        }).as('createContactsDraft')

        cy.intercept('GET', '**/contacts?**', {
            fixture: 'sendsurveys/all_contacts.json',
        }).as('fetchAllContacts')
        cy.get('[data-testid=all-contacts]').click()

        cy.wait('@fetchAllContacts')
        cy.get('[data-testid=submit-recipients]').click()
        cy.contains('Successfully added the contacts.')
    })
  })

This is a working implementation.