test: check detached anchor for conflicts with anchors plugin

test/detached-anchor.test.ts

@@ -1,7 +1,8 @@
 import transform from '../src/transform';
 import plugin from '../src/transform/plugins/detached-anchor';
+import anchorsPlugin from '../src/transform/plugins/anchors';
 
-const transformYfm = (text: string) => {
+let transformYfm = (text: string) => {
     const {
         result: {html},
     } = transform(text, {
@@ -16,10 +17,19 @@ describe('detached-anchor', function () {
             expect(transformYfm('{#my-anchor}')).toBe('<a id="my-anchor"></a>');
         });
     });
-    describe('with heading', () => {
+    describe('with heading anchors', () => {
+        transformYfm = (text) => {
+            const {
+                result: {html},
+            } = transform(text, {plugins: [plugin, anchorsPlugin]});
+            return html;
+        };
         it('does not conflict with heading anchors', () => {
             expect(transformYfm('# Heading {#heading-anchor} \n {#my-anchor}')).toBe(
-                '<h1 id="heading-anchor">Heading</h1>\n<a id="my-anchor"></a>',
+                '<h1 id="heading-anchor">' +
+                    '<a href="#heading-anchor" class="yfm-anchor" aria-hidden="true">' +
+                    '<span class="visually-hidden">Heading</span></a>Heading</h1>\n' +
+                    '<a id="my-anchor"></a>',
             );
         });
     });