diff --git a/changelogs/unreleased/new-branch-fixture.yml b/changelogs/unreleased/new-branch-fixture.yml
new file mode 100644
index 00000000000..ce5ed816102
--- /dev/null
+++ b/changelogs/unreleased/new-branch-fixture.yml
@@ -0,0 +1,4 @@
+---
+title: Replace static fixture for new_branch_spec.js
+merge_request: 9131
+author: winniehell
diff --git a/spec/javascripts/fixtures/branches.rb b/spec/javascripts/fixtures/branches.rb
new file mode 100644
index 00000000000..0e7c2351b66
--- /dev/null
+++ b/spec/javascripts/fixtures/branches.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe Projects::BranchesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('branches/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'branches/new_branch.html.raw' do |example|
+    get :new,
+      namespace_id: project.namespace.to_param,
+      project_id: project.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/fixtures/new_branch.html.haml b/spec/javascripts/fixtures/new_branch.html.haml
deleted file mode 100644
index f06629e5ecc..00000000000
--- a/spec/javascripts/fixtures/new_branch.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-%form.js-create-branch-form
-  %input.js-branch-name
-  .js-branch-name-error
-  %input{id: "ref"}
diff --git a/spec/javascripts/new_branch_spec.js b/spec/javascripts/new_branch_spec.js
index 9b657868523..1d014502c2a 100644
--- a/spec/javascripts/new_branch_spec.js
+++ b/spec/javascripts/new_branch_spec.js
@@ -8,7 +8,7 @@ require('~/new_branch_form');
   describe('Branch', function() {
     return describe('create a new branch', function() {
       var expectToHaveError, fillNameWith;
-      preloadFixtures('static/new_branch.html.raw');
+      preloadFixtures('branches/new_branch.html.raw');
       fillNameWith = function(value) {
         return $('.js-branch-name').val(value).trigger('blur');
       };
@@ -16,7 +16,7 @@ require('~/new_branch_form');
         return expect($('.js-branch-name-error span').text()).toEqual(error);
       };
       beforeEach(function() {
-        loadFixtures('static/new_branch.html.raw');
+        loadFixtures('branches/new_branch.html.raw');
         $('form').on('submit', function(e) {
           return e.preventDefault();
         });