I have noticed that line expect(field).not.toBeNull() in chapter 2 does not make our test fail if we do not create firstName element. field is 'undefined' so the test still passes. Maybe we should check if field is not 'undefined' in this case?

Hi, I'm aware that there will be a second edition coming soon but in the meantime, I'm struggling to get the first test working with createRoot, as this doesn't seem to work:

it('renders the customer first name', () => {
const customer = { firstName: 'Ashley'}
const container = document.createElement('div')
const root = createRoot(container)
root.render(<Appointment customer={customer} />)
expect(container.textContent).toMatch('Ashley')
})

container.textContent ends up returning an empty string. Any suggestion what's wrong here? Thank you in advance. I've been enjoying the book so far.

hope it's appropriate to put this question in here:

I am ankle-deep in Mastering react tdd, and am puzzled by the syntax necessary for the refactoring near the end of chapter 2, specifically the passage below - why couldn't I use {fieldName}: value instead of {...{ [fieldName]: value }}? And what are the ... and [] doing in this context?

const itSubmitsExistingValue = (fieldName, value) =>
  it('saves existing value when submitted', async () => {
    expect.hasAssertions();
    render(
      <CustomerForm
        {...{ [fieldName]: value }}
        onSubmit={props =>
          expect(props[fieldName]).toEqual(value)
        }
      />
    );
    await ReactTestUtils.Simulate.submit(form('customer'));
  });

I just found a dependency between tests in tag cucumber in files:

• MenuButtons.test.js
• sharingSagas.test.js

There is a missing reset of socketSpy variable, which should be set to default state after each test or else it can possibly change the behavior of tests.

Fix is as simple as adding one line into both files:

// MenuButtons.test.js

describe('MenuButtons', () => {
  ...
  describe('sharing button', () => {
    ...
    afterEach(() => {
      ...
      // Add this line
      socketSpy = undefined;
    });
    ...
  });
  ...
});

// sharingSagas.test.js

describe('sharingSaga', () => {
  ...
  afterEach(() => {
    ...
    // Add this line
    socketSpy = undefined;
  });
  ...
});

This unfornately causes the breakage of test dispatches an action of STOP_SHARING when stop sharing is clicked in MenuButtons.test.js due to failure of function notifySocketOpened where the socketSpy is undefined and it is trying to reach its onopen callback property.

Testcase works because socketSpy is set previously in test dispatches an action of START_SHARING when start sharing is clicked and just skipping this test causes test case failure as well.

Solution would be to somehow call startSharing saga that creates WebSocket and therefore sets the onopen callback property . Easiest solution appears to be just adding this line to test:

// sharingSagas.js
...
    it('dispatches an action of STOP_SHARING when stop sharing is clicked', async () => {
      const store = renderWithStore(<MenuButtons />);
      // Add this line
      click(button('Start sharing'));
      store.dispatch({ type: 'STARTED_SHARING' });
      await notifySocketOpened();
      click(button('Stop sharing'));
      return expectRedux(store)
        .toDispatchAnAction()
        .matching({ type: 'STOP_SHARING' });
    });

Hope it helps.

I was confused by this sentence at the end of Chapter 1.

Open index.html in your browser and behold your creation:

I was wondering where my server was and how to open this file. I was unable to open localhost/index.html (because there is not a web server launched by running npm run build even after adding "build": "webpack --watch --progress" to package.json.

I looked at the code repository and saw there was a folder for "server" but when I looked at the chapter-1-exercises tag, there was no mention of "server".

Finally after some fruitless attempts at getting it to go with npm start and other useless commands, it dawned on me that I could open the file itself to see how the browser would render it. In Visual Studio Code, I had to right click the file itself, get its absolute path, and then paste that full path into a browser search bar to open it in the browser without any server.

Other than that confusion, Chapter 1 was quite good. There was a minor dilemma regarding the "There are no appointments scheduled for today." text that disappeared from some of the partial code but that's easy to crosscheck with the repository.

Hi @dirv

First of all a great book.
Thank you.

I try to resolve the exercises for chapter 6. Unfortunately, tags/chapter-6-exercises doesn't work.
I try this same for chapter 8 and it's the same.

Am I missing something?

In the section named Focusing the prompt the document.activeElement didnt work for me (I m using jest ^27.0.6 with dependency jest-environment-jsdom 27.0.6 ) meaning it remained set to document body.

The solution was attaching this code in createContainer function:

export const createContainer = () => {
    const container = document.createElement('div')

    // Add this line here
    document.body.appendChild(container)

    ...
}

So basically just attaching container to the body helped me to solve this issue. Hope it will help someone with same problem.

Hi @dirv , in chapter 2

  it('saves new first name when submitted', async () => {
    expect.hasAssertions();
    render(
      <CustomerForm
        firstName="Ashley"
        onSubmit={({ firstName }) =>
          expect(firstName).toEqual('Jamie')
        }
      />
    );
    await ReactTestUtils.Simulate.change(firstNameField(), {
      target: { value: 'Jamie' }
    });
    await ReactTestUtils.Simulate.submit(form('customer'));
  });

I noticed that neither ReactTestUtils.Simulate.change() nor ReactTestUtils.Simulate.submit() would return Promise, so I tried to remove async / await and the test still passed.

  it('saves new first name when submitted', () => {
    expect.hasAssertions();
    render(
      <CustomerForm
        firstName="Ashley"
        onSubmit={({ firstName }) =>
          expect(firstName).toEqual('Jamie')
        }
      />
    );
    ReactTestUtils.Simulate.change(firstNameField(), {
      target: { value: 'Jamie' }
    });
    ReactTestUtils.Simulate.submit(form('customer'));
  });

Is it correct to remove async / await?