"Missing header or cookie error" generated during smoke analysis tests (Create-react-app)

Question

I use universal-cookieto store in local storage, which is then sent to storage.

class App extends Component {

  componentDidMount() {
    // if a cookie is present, save the value in the store for use communication 
    // with the server. If the cookie is undefined, the user is redirected to the login page.
    // Redirection is handled by router.
    const userNameInCookie = cookies.get('userName');
    if (userNameInCookie) {
        this.props.dispatch(actions.setUserNameFromCookie(userNameInCookie));
    }
  }

  render() {
    return (
        <div>
            <div className="header">
                <h2 className="header-title">Traveler</h2>
            </div>
            {this.props.children}
        </div>
    );
  }
}

When I run the Jest test suite, each individual test fails with this error

FAIL  src/test/UserCreateForm.test.js
● Test suite failed to run

Missing the cookie header or object

  at new Cookies (node_modules/universal-cookie/lib/Cookies.js:35:15)
  at Object.<anonymous> (src/actions/index.js:4:17)
  at Object.<anonymous> (src/reducers/index.js:1:258)
  at Object.<anonymous> (src/store.js:4:40)
  at Object.<anonymous> (src/test/UserCreateForm.test.js:7:40)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)
  at process.emit (events.js:194:7)
  at process.nextTick (internal/child_process.js:766:12)
  at _combinedTickCallback (internal/process/next_tick.js:73:7)
  at process._tickCallback (internal/process/next_tick.js:104:9)

I also tried smoke test with Enzyme, but I get the same error. The code behaves the way I want, so I find it universal-cookiejust not consistent with the tests.

Any ideas? Thanks!

Answer 1

Did you import a universal cookie and then define a class?

import Cookies from 'universal-cookie';
const cookies = new Cookies();

So your code will look ...

import Cookies from 'universal-cookie';

class App extends Component {
  componentDidMount() {
    const cookies = new Cookies();
    const userNameInCookie = cookies.get('userName');
    if (userNameInCookie) {
      this.props.dispatch(actions.setUserNameFromCookie(userNameInCookie));
    }
  }

  render() {
    return (
      <div>
        <div className="header">
          <h2 className="header-title">Traveler</h2>
        </div>
        {this.props.children}
      </div>
    );
  }
}