set value to context provider in Cypress

[muriukialex]

Hello, the challenge I have 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

	})
  })

[muriukialex]

hello @muratkeremozcan, mind taking a look at this

[muratkeremozcan]

Hard to tell the whole story, but it looks like e2e is being mixed with component testing. There is no cy.visit in component testing, only mount. Assuming this is a component testing matter, here is an example of how you can implement and test Context api.

Context implementation

Intermediate component : only for FYI

Component test

[muriukialex]

Thank you for getting back @muratkeremozcan.
I'll try out the implementation method listed above and submit the solution I'll have crafted here.

In the meanwhile, please keep this discussion open

[muriukialex]

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('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.')
	})
  })

Thank you @muratkeremozcan. I referred to the implementations you linked above and derived this working implementation from there.
I think we may consider this discussion closed.

[muratkeremozcan]

What happens with 2 it blocks? Might need the mount inside before each?

[muriukialex]

Error while typing this, thanks for that preview.