chai-fetch

chai-fetch

Chai matchers to make matching fetch responses clear & easy

fetch('http://example.com').then((response) => response.text()).then((text) => expect(text).to.equal('hi there')) is pretty much the simplest way to assert on the body of a fetch response, and that's a huge horrible mess. This library takes away that pain, and makes life easier.

Getting started

Install chai-fetch with:

npm install --save-dev chai-fetch

Chai-fetch is a commonjs module, and should work out of the box in node, or with bundling tools like browserify & webpack.

Chai-fetch is written in TypeScript, so will work completely fine with JS, but if you're using TypeScript too you'll also get working typings out of the box.

An example test using this (with http-server-mock to fake HTTP responses) would look like:

const chai = require('chai');
const chaiFetch = require('chai-fetch');
chai.use(chaiFetch);

const { expect } = chai;

describe('Chai-fetch', () => {
    beforeEach(() => mockServer.start(8080));
    afterEach(() => mockServer.stop());

    describe('.responseText', () => {
        it('should match responses with matching bodies', () => {
            mockServer.get('/match').thenReply(200, 'matching body')
            .then(() =>
                expect(fetch('http://localhost:8080/match')).to.have.responseText('matching body')
            );
        });
    });
});

Tips

• Remember that the assertions here are all asynchronous, so you need to return or .then or await on them, to ensure that your test framework waits for the result and catches failures.

• Take a look at http-server-mock to mock your server responses.

• If you're writing HTTP tests like this, and you're using Babel, TypeScript or just some very modern JS engines, you can make them a little more readable with async/await:

  it('should match responses with matching bodies', async () => {
      await mockServer.get('/match').thenReply(200, 'matching body');
  
      await expect(fetch('http://localhost:8080/match')).to.have.responseText('matching body');
  });
  

API

.responseText(expectedText)

e.g. expect(fetch('http://example.com')).to.have.responseText('hi there')

If the object being tested is a fetch response, or a promise for a fetch response, this asserts that the full text of the body is equal to the text given.

You can also pass a regular expression: .responseText(/match a substring/).

This does not test the status code (just like fetch itself doesn't), but both normal and negated tests will fail if a passed response promise is rejected entirely (e.g. if you have a network error).

.status(expectedStatus)

e.g. expect(fetch('http://example.com')).to.have.status(200)

If the object being tested is a fetch response, or a promise for a fetch response, this asserts that the status of the response is the status given.

More to come (file an issue!)