Mastering React Test-Driven Development

Focusing the prompt

Let's move on to the most difficult part of this: focusing the actual prompt. For this, we'll need to introduce a ref:

1. Open test/Prompt.test.js and add the following describe block at the bottom, nested within the Prompt describe block. The test uses the document.activeElement property, which is the element that currently has focus. It's also using the renderInTableWithStore function, which is the same as the renderWithStore helper you've seen already except that the component is first wrapped in a table:

describe('prompt focus', () => {  it('sets focus when component first renders', () => {    renderInTableWithStore(<Prompt />);    expect(document.activeElement).toEqual(textArea());  });});

2. Let's make that pass. We'll define ...