Created
September 2, 2019 19:41
-
-
Save rowlandekemezie/f014337219c42b2488c65faaf6689158 to your computer and use it in GitHub Desktop.
How you can nuke beforeEach and ensure each test spec is totally isolated from others
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define a setup function you can reuse and maybe nuke beforeEach completely. | |
// Your test spec is currently too simple to even require the hasle beforeEach; | |
function setUp() { | |
const props = { | |
strategy: null, | |
event: mockEvent, // You can use jest to mock | |
eventId: mockEventId, | |
ConfigLogo: null, | |
handleDuplicateEvent: action("select provider") | |
} | |
const wrapper: HTMLElement = render(<EventCard />) | |
return { | |
wrapper, | |
props | |
} | |
} | |
describe("Event card props", () => { | |
// This beforeEach will run for each tech spec(the "it" block). | |
// And that's why you had to use *theResult* which is bad naming at that. | |
// You don't really need beforeEach block to be this way. | |
// You can nuke this. | |
beforeEach(() => { | |
const result = render( | |
<EventCard | |
strategy={null} | |
event={mockEvent} | |
eventId={mockEventId} | |
ConfigLogo={null} | |
handleDuplicateEvent={action("select provider")} | |
/> | |
); | |
container = result.container; | |
}); | |
it("should render with default props", () => { | |
const { wrapper, props } = setUp(); | |
const component = <wrapper {...props} /> | |
const defaultTitle = component.container.querySelector(`strong`) as HTMLElement; | |
expect(defaultTitle).toHaveTextContent("Untitled Event"); | |
}); | |
it("should have class provider and empty when strategy is null", () => { | |
const { wrappper, props } = setUp(); | |
const component = <wrapper {...props} /> | |
const strategy = component.container.querySelector(`.providers`) as HTMLElement; | |
expect(strategy).toHaveClass("providers none"); | |
}); | |
it("should have class providers when strategy is not empty", () => { | |
// modify the props and use it here as well | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment